<head>
<title>title/judul halaman website anda</title>
<style type="text/css">
<!--
p { color: red; }
-->
</style>
</head>
<body>
<p>Tulisan ini akan berwarna merah</p>
</body>
</html>
Sehingga hasilnya akan seperti ini;
Tulisan ini akan berwarna merah
"Tulisan ini akan berwarna merah". Jika anda lihat kode di atas tidak ada html tag color yang mengatur penentuan warna antara <p> sampai </p> pada bagian body text. Yang membuat warna merah muncul adalah CSS rule yang terletak antara comment tag html (<!-- ... sampai dengan -->). Kode antara comment tag html (p { color: red; }) adalah contoh 'Struktur CSS Rule'. Tetapi harap dicatat, untuk membuat CSS rule dapat benar-benar berfungsi adalah diawali dengan tag CSS html antara lain "tag style buka" ( <style type="text/css"> ) dan "tag style tutup" ( </style> ) memberikan penjelasan bahwa model bahasa CSS digunakan dalam suatu dokumen, "comment html" ( <!-- dan --> ) berfungsi jika apabila visitor menggunakan browser yang tidak support CSS maka browser terkait akan mengabaikan rule CSS. Dan Selalu terletak antara tag <head> sampai </head>. Metode penyisipan CSS ini disebut dengan istilah Inline Style CSS.
Kembali ke pokok permasalahan, "p { color: red; }" merupakan contoh struktur dari CSS Rule. "p" adalah selector merupakan level tertinggi dari CSS rule, yang memberikan deskripsi elemen tertentu dalam suatu dokumen akan diatur oleh css. "p" dari contoh diatas adalah rule untuk teks paragraf. Selanjutnya "{ color: red; }" disebut sebagai 'Declaration Block' terdiri dari 'property' (color:) dan 'Value' dari properti (red;). Dalam CSS terdapat berbagai macam properti yang dapat anda pakai misalnya color, background color, link, posisi dalam halaman, garis (border), dan lain sebagainya. Lebih lanjut dapat anda liha di sini. Dalam penulisan kode CSS 'property' selalu diikuti oleh 'Value' (contoh di atas valuenya red) yang memberikan perintah pada browser untuk menjadikan keseluruhan paragraf berwarna merah. Property selalu diikuti karakter ":" dan value selalu diikuti karakter ";", tanda titik-koma ';' berfungsi menjadi pemisah jika 'Value' nya berjumlah lebih dari satu (multiple value). Contohnya jika keseluruhan paragraf akan saya buat warna merah, huruf tebal, background berwarna kuning dan saya tambahkan garis bawah, maka css code yang akan saya tuliskan adalah sebagai berikut;
<style type="text/css">
<!--
p {
color: red;
font-weight: bold;
background-color: yellow;
text-decoration: underline;
}
-->
</style>
Sehingga hasilnya akan seperti ini;
Tulisan ini akan berwarna merah
Mudah kan! Cukup sekian artikel CSS untuk hari ini, saya lanjutkan dilain kesempatan.
Hi, thanks for the tip! I've just never really caught on to CSS... and I easily code in old-school HTML, PHP, MySQL, C, etc! Do you or anyone you know do sidework over the net? Anyhow, nice site... I'm subscribed to your RSS feed now so I'll be checking in regularly!
BalasHapus[...] postingan sebelumnya saya menuliskan tentang ‘Anatomi CSS Rule’ dimana saya lampirkan juga contoh pembuatan css sederhana dengan menggunakan Style text CSS, contoh [...]
BalasHapus