Tutorial Cascading Style Sheet (CSS) Part #4


Sejauh ini Anda sudah mengetahui kelebihan css, Ayo kita keruk kembali untuk tidak melupakan ketentuan dasar yang berlaku di css.
Perhatikan contoh berikut :

B {color: lime}

Dikenal sebagai "Style Rule" atau peraturan/perintah css, yang mana terdiri dari dua elemen dasar yaitu : "selector" dan "declaration". Sebuah "selector" biasanya adalah tag HTML (dalam hal ini B), sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector.
Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma, Bingung kan? Perhatikan contoh berikut!

B {color: lime; text-decoration: underline; font-family: Arial}

Itu baru bisa dikatakan syntax css yang valid. Sulit? Tidak begitu, jangan pernah berkata rumit sebelum janur kuning melengkung (Loh?? Hehehe).
Lengkapnya :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: lime; text-decoration: underline; font-family: Arial}
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita
sendiri</B>
</BODY>

</HTML>

CSS sendiri memiliki lebih dari 60 (enam puluh) keyword (kata kunci), dan anda disarankan untuk sering bercinta dengan css agar familiar dengan tiap keyword seiring tutorial ini :).
Selectors juga bisa di kelompokkan, seperti contoh berikut, yang mengubah teks untuk H1, H2, dan H4, menjadi berwarna putih.

H1, H2, H3 {color: white} /* this rule turns H1, H2 and H3 blocks white */

Perlu diingat, syntax dapat kita sertakan komentar, persis seperti c++ dengan menggunakan simbol /* dan */.
Hal yang paling umum dalam memasukkan kode Style Sheet dengan menggunakan tag <STYLE>, tag <STYLE> ini selalu tampil dalam bagian <HEAD> dari dokumen anda, garis besarnya seperti ini :

<HEAD>
<STYLE TYPE="text/css">
... aturan-aturan css disini ...
</STYLE>
</HEAD>


Jika kita teliti dari contoh-contoh sebelumnya, maka memang seperti di atas garis besar syntax css yang digunakan. TAPI INI HANYA BERLAKU UNTUK DOKUMEN INI SAJA (bukan marah, hanya mempertegas dengan kapital, hehehe), tapi terkadang akan menimbulkan sedikit masalah jika hendak menerapkan css ke seluruh tampilan web. Don’t worry be happy... pemecahannya semudah membuat game menggunakan borland c++ (hah? Kata siapa mudah? Hehe), Jadi ingat waktu diberi tugas buat game, saking mentoknya jadi saya donlot aja trus pelajarin, walahh... ternyata masih banyak syntax yang belum dipelajari dan dikenal. –‘. Tuh kan mulai ngawur, yasudah segini dulu, takut nambah ngawur. Hehehe...

0 komentar:

Posting Komentar

My Facebook

Live Traffic

Followers