Tutorial Cascading Style Sheet
(CSS)
Pernah dengar istilah di atas? (bukan, bukan yang "Kata-kata Introduksi" tapi di atasnya lagi, nah bener
yang itu, "Cascading Style Sheet" atau sering disebut CSS). Mungkin sebahagian besar akan menjawab
"YA". Pun, kalau semisal belum sekarang jadi sudah. Karena Cascading Style Sheet adalah suatu
teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan
menggunakan Metode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan
yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat).
Jelas, dengan sedikit berfikir dan menggunakan logika maka anda akan mendapatkan hasil yang
memuaskan, maka sedari itu baca semua tutorial ini sampai habis, dicoba langsung, kemudian jika bisa
dikembangkan, sehingga kalau misalnya anda ingin sedikit memodifikasikan kode yang telah dibuat di
dalamnya sangatlah gampang, apalagi bla...bla...bla... dan bla..bla….(wah... bakat ceramah saya tiba2
kambuh (",) ma'af) ya udah pokoknya CSS itu digunakan untuk memperindah tampilan situs, terserah
anda mo mendefinisikannya bagaimana? (lihat definisi saya yang di Italic-kan).
Bagi anda yang baru dalam bidang ini jangan khawatir, karena memang tutorial ini sangat mendasar,
tetapi setidaknya sudah menguasai dasar-dasar HTML. Dan bagi anda yang sudah mahir jangan ngejek
dunks, toh, saya sudah ngaku ini tutorial untuk yang "pemula saja". Hehehe... :-) peace, bro's.
Ya udah, Baca aja deh... syukur-syukur nambah pengetahuan atawa temen dikala gak bisa tidur, gitu baca
tutorial ini langsung (Zzz... Zzz... Zz... grok.. grok...) tertidur deh hehehe... kelihatannya yang belakangan
disebut yang paling sering dipilih.
Anggap ini Mudah
Sekarang coba kita mulai dengan contoh-contoh yang ringan aja dulu (dalem hati : syukur-syukur gak tau, kalau ini alih-alih karena gak mampu buat yang ribet)
Note: Kalau misalnya malas menyalin kode HTML nya, gunakan tekhnik 2 jurus yang sangat ampuh. Ya,
bener "kopi dan paste" bukan kopi dan teh manis ya!
<HTML>
<HEAD>
</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>
Nah, seperti yang anda lihat beberapa huruf pada kalimat-kalimat di atas menjadi BOLD (ditebalin),
karena fungsi dari tag <B> dan </B> adalah untuk menebalkan huruf. Lihat kembali catatan-catatan atau
tutorial-tutorial untuk membuat HTML anda. Sekarang coba bayangkan bagaimana jika kita ingin
membuat warna pada huruf-huruf yang ditebalkan itu? Katakan saja kita ingin mewarnainya dengan
hijau? Mungkin.
Kebanyakan kita akan buat listing kodenya seperti ini :
<HTML>
<HEAD>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatu
pekerjaan</FONT></B> itu mudah maka pekerjaan itu akan
beneran menjadi<B><FONT COLOR="Lime"> lebih mudah
</FONT></B>?
<P>
J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti
</FONT></B> terhadap <B><FONT COLOR="Lime">diri kita
sendiri </FONT></B>
</BODY>
</HTML>
Bagaimana hasilnya di browser? Huruf yang ditebalin sekarang sudah berwarna "hijau", sekarang coba
bandingkan kemudahan yang didapat jika kita menggunakan Style-Sheet.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B { color : lime }
</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>
Kedua contoh di atas terlihat persis sama di browser, jadi apa untungnya buat kita? Hehehe... masih
belum ngerti juga? Jika anda menggunakan style-sheet maka listing code anda setidaknya akan lebih
mudah dibaca dan di atur. Keuntungan yang kedua, kita dapat melakukan ini dimana saja dan kapan saja.
Ini akan anda pahami setelah anda berpindah ke tahap selanjutnya yang lebih berbobot. (wah salut...
berarti ini masih "piece of cake" khan bro?).
Coba-coba? Silahkan!
Eh... tiba-tiba saja terfikir untuk menggantikan warna dengan kode RGB nya, layaknya perintah-perintah
HTML dasar. bagaimana? Bisa tidak ya?
Seperti terlihat di bawah ini kita cukup menggantikannya saja untuk mendapatkan variasi warna.
<STYLE TYPE="text/css">
B { color : #CC6633 }
</STYLE>
Bagaimana? Sama mudahnya bukan? Bagi anda yang sudah familiar dengan beberapa perintah HTML,
maka beberapa modifikasi dapat anda buat misalnya seperti contoh di bawah :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
I { color : red }
</STYLE>
</HEAD>
<BODY>
Tutorial Cascading Style Sheet (CSS)
