Sebelum kita berlanjut ke topik yang lebih dalam, ada baiknya kita siapkan sebuah dokumen HTML sebagai bahan latihan. Kita mulai saja dengan mengetikkan kode HTML di notepad atau teks editor yang lain. Ketikkan kode 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 seperti berikut.
Sekarang saatnya kita sisipkan dengan kode CSS. Terdapat tiga cara penulisan kode CSS, yaitu secara langsung (inline style), definisi dalam header dokumen atau melalui file referensi yang di-link ke dalam dokumen HTML. Kita akan mencoba cara pertama, yaitu Inline style.
- Contoh kasus, misalnya kita ingin agar teks dalam tag <p> berwarna merah, cara pertama (Inline Style) dapat dicapai dengan menambahkan kede CSS pada tag <p> sehingga menjadi
<p style=”color:red”>Contoh baris paragraf</p>.
Terlihat pada kode diatas, kita tinggal menambahkan kode style=”property:value” menjadi style=”color:red”
- Simpan kembali dokumen HTML dan buka pada web browser. Jika kode-nya benar, maka akan tampak seperti berikut:
Apabila kita ingin merubah warna lagi, cukup mengubah kode 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 kode 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, lalu buka dengan web browser, maka akan tampak seperti berikut:
0 Comment to "Inline Style (CSS)"
Post a Comment
Jika ada pertanyaan, link mati, dan ucapan terima kasih, silahkan isi di kotak komentar...