Sebelum kita berlanjut ke topik yang lebih dalam, ada baiknya kita siapkan sebuah dokumen HTML sebagai materi latihan. Kita mulai saja dengan mengetikkan isyarat HTML di notepad atau teks editor yang lain. Ketikkan isyarat berikut:
<html>
<head>
<title>Latihan</title>
</head>
<body>
<p> Contoh baris paragraf</p>
</body>
</html>
Simpan dengan nama latihan.html. Lalu buka dengan web browser (Mozilla, chrome dll) maka akan tampak ibarat berikut.
Sekarang saatnya kita sisipkan dengan isyarat CSS. Terdapat tiga cara penulisan isyarat CSS, yakni secara langsung (inline style), definisi dalam header dokumen atau melalui file acuan yang di-link ke dalam dokumen HTML. Kita akan mencoba cara pertama, yakni Inline style.
- Contoh kasus, contohnya kita ingin semoga teks dalam tag <p> berwarna merah, cara pertama (Inline Style) sanggup dicapai dengan menambahkan kede CSS pada tag <p> sehingga menjadi
<p style=”color:red”>Contoh baris paragraf</p>.
Terlihat pada isyarat diatas, kita tinggal menambahkan isyarat style=”property:value” menjadi style=”color:red”
- Simpan kembali dokumen HTML dan buka pada web browser. Jika kode-nya benar, maka akan tampak ibarat berikut:
Apabila kita ingin merubah warna lagi, cukup mengubah isyarat value dengan warna yang kita inginkan (kode warna harus dalam bahasa Inggris). Misalnya untuk warna teks biru, maka kodenya menjadi:
<p style=”color:blue”>
Contoh baris paragraf</p>
- Sekarang coba kita buat isyarat sepeti dibawah ini:
<body>
<p style=”color:red”>Contoh baris paragraf</p>
<p style=”color:blue”>Contoh baris paragraf</p>
<p style=”color:green”>Contoh baris paragraf</p>
</body>
Simpan kembali, kemudian buka dengan web browser, maka akan tampak ibarat berikut:
Sumber http://campusnancy.blogspot.com
