08/04/2016

3 Model Penulisan CSS

08/04/2016

Model penulisan css Model penulisan CSS yang saya maksudkan di sini adalah cara kita menyisipkan kode CSS dalam sebuah dokumen HTML dengan 3 cara yang paling umum digunakan. Yaitu,
  1. Internal CSS
    • Model Penyisipan css di dalam file Html.
  2. Eksternal CSS
    • Model Penyisipan Css di luar file Html.
  3. Inline CSS
    • Model penyisipan Css langsung di dalam tag Html.
Sebelum kita bahas lebih jauh, sebagai gambaran umum, berikut ini saya sertakan contoh struktur dokumen HTML dasar.

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>

<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>

    <div id="main"></div>
    <aside id="sidebar"></aside>
    <footer id="footer-wrapper"></footer>
</div>

</body>
</html>

Model Penulisan Internal CSS

Internal CSS adalah model penulisan css dengan menyispikan kode CSS langsung didalam file HTML, penggunaanya harus diapit di dalam tag <style type="text/css"> ... </style> dan berada diantara tag <head> dan </head>. Contoh model penulisan Internal CSS di bawah ini merujuk pada contoh struktur dokumen HTML dasar yang telah saya sertakan di atas.

HTML

<head>
<style type="text/css">
 body {
            background: #EEEEEE;
            color: #000000;
}
#header-wrapper {
            background: #000000;
            color: #FFFFFF;
} 
</style> 
</head>
Contoh selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
 body {
            background: #EEEEEE;
            color: #000000;
}
#header-wrapper {
            background: #000000;
            color: #FFFFFF;
} 
</style> 
</head>
<body>
<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

Model Penulisan Eksternal CSS

Model penulisan External CSS adalah model penulisan CSS yang terpisah dari file HTML dan hanya berisikan kode kode CSS saja, biasanya dokumen tersebut berextensi “css”. Anda bisa menuliskannya dalam text editor dan menyimpannya di hosting semacam code.google atau yang lainnya. Untuk menerapkan dokumen External CSS dalam dokumen HTML dibutuhkan sebuah tag <link> dan diletakkan diantara tag <head> … </head>.

HTML

<head>
<link rel="stylesheet" href="doc/css/main.css" /> 
</head>
Contoh selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="doc/css/main.css" /> 
</head>
<body>
<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

Model Penulisan Inline CSS

Inline CSS adalah model penyisipan css langsung didalam tag HTML. Cara penulisannya cukup dengan menambahkan atribut style="....." dalam tag HTML. Inline Css pada dasarnya tidak direkomendasikan penggunaannya, namun terkadang Inline Css dibutuhkan untuk memberi format HTML yang lebih spesifik.

HTML

<body style="background: #EEEEEE; color: #000000">
..... 
</body> 
Contoh Selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body style="background: #EEEEEE; color: #000000">
<div id="page-wrapper">
    <div id="header-wrapper" style="background: #000000; color: #FFFFFF">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>