External CSS

Penggunaan CSS yang baik adalah memisahkan antara document CSS dan document HTML. Dengan memisahkan kedua file ini maka akan mudah bagi web developer untuk memisahkan content (HTML) dan desain (CSS).

External CSS sebenarnya adalah sebuah file yang hanya berisi code CSS saja dan disimpan dengan format [.CSS]. File CSS ini nantinya akan dipanggil oleh HTML menggunakan <link> tag dan bukannya <style> tag.

Cara membuat file CSS external

Sebenarnya cara membuat file CSS hampir sama dengan cara membuat file HTML. Pertama buka program notepad.exe dan tuliskan code CSS dibawah ini.

Code CSS:

body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }

Simpan file diatas sebagai file CSS yaitu dengan extensi [.CSS] dan pastikan bahwa file ini tidak kamu simpan sebagai text file atau dengan extensi [.txt] karena secara default notepad akan menyimpan file sebagai text. Simpan file CSS ini dengan nama [tester.CSS].

Sekarang buat file HTML berisikan code dibawah ini dengan cara yang sama seperti kita membuat file CSS.

Code HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="tester.css" />
</head>
<body>
<h3> Header putih </h3>
<p> Paragrap ini warnanya biru.
Background tulisan ini adalah gray karena kita memodifikasinya dengan CSS! </p>
</body>
</html>

Save file HTML diatas dengan nama [index.html] di directory yang sama kamu menyimpan file CSS. Sekarang buka file HTML diatas dengan web browser yang kamu punya dan hasilnya akan tampak seperti dibawah ini.

Hasil penampakan external CSS:

Header ini warnanya white

Paragrap ini warnanya aqua. Background tulisan ini adalah gray karena kita memodifikasinya dengan CSS!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>