Belajar CSS Eksternal

Pada postingan sebelumnya saya share cara membuat file CSS internal atau CSS yang filenya menjadi satu dengan file HTML-nya. Sekarang saya mau share buat CSS Eksternal.
Sebenarnya konsepnya sama, hanya file CSS-nya terpisah dengan file HTMLnya
Pertama, kita buat dulu file CSS-nya menggunakan notepad, text editor, atau Dreamweaver. Contoh dari file CSS seperti ini :http://raditiamadya.com/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif
<!- -
h1{font-family: comic sans ms;
font-size: 20pt;
text-align: center;
color: red;
}
h2{font-family: calibri;
font-size: 12pt;
text-align: justify;
color: black;
}
p{font-family: arial;
font-size:12pt
text-align: justify;
color: blue;
font-weight: bold;
}
- ->
File tersebut disimpan dengan nama "css eksternal.css". Penyimpanan file CSS dan HTML jadi satu folder.
Lalu kita buat file HTMLnya. Pada bagian <head> ketikkan
<link rel="stylesheet" type="text/css href="nama file CSS">
karena tadi kita menyimpan file CSS dengan nama "css eksternal.css", maka pada tulisan berwarna merah kita ganti menjadi
<link rel="stylesheet type="text/css" href="css eksternal.css">
Setelah itu, pada bagian<body>baru kita isi dengan perintah seperti pada CSS diatas. Contoh file HTML dengan menggunakan CSS eksternal
<html>
<head>
<title>Contoh Penggunaan CSS eksternal</title>
<link rel="stylesheet" type="text/css" href="
css eksternal.css">
</head>
<body>
<h1>Penggunaan CSS Eksternal</h1>
<p>CSS eksternal harus dipisahkan atau berbeda halaman atau file. Cara penggunaanya diperkuat dengan link</p>
<br>
<h2>Gusti Raditia Madya</h2>
</body>
</html>
Sekian dari saya. Semoga membantu :)
NB : Agar lebih mudah, saya sarankan menggunakan Dreamweaver, karena filenya akan berwarna warni, sehingga memudahkan kita dalam mengeditnya dan juga Dreamweaver memiliki banyak pilihan fungsi pada CSS.

1 komentar:

Saya Mau nanya kenapa ya komentar di blog saya tidak bisa dilihat?

Reply

Posting Komentar