Tutorial Cascading Style Sheet (CSS)
Kata-kata Introduksi
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>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<I> lebih mudah</I>?
<P>
J: Karena itu merupakan <I>sugesti</I> terhadap <I>diri kita
sendiri</I>
</BODY>
</HTML>
Anda lihat saya mengganti huruf "B" dengan Huruf "I", sehingga jika menurut kebiasaan browser
(berlebihan tidak bahasanya?) akan menganggap baris yang diberi tag tersebut menjadi ITALIC. Sekarang
lihat hasilnya pada browser. Timbul pertanyaan bagaimana jika untuk UNDERLINE atawa garis di bawah
huruf? Ya benar, hal ini juga masih berlaku.
Nah.. sekarang saya ingin mencoba sedikit pemahaman anda ☺ !
Jika saya ingin kata "suatu pekerjaan" dari contoh di atas menjadi berwarna merah dan ITALIC, terus
kata "lebih mudah" kita buat menjadi berwarna hijau dan BOLD, terus untuk menambah kebingungan
anda jadikan kata "sugesti" dengan UNDERLINE dan berwarna merah, serta kata "diri kita sendiri"
menjadi hijau dan BOLD.
Saya kehendaki tampilannya seperti itu pada browser bagaimana? ehm.. menurut anda, membuat kode
HTML nya? Susah? Wah... payah deh (",) ---> ini senyum, tapi kalau mau yang lebih mantab lagi seperti
ini c",) --> isn't it cool, huh? (ini macemnya gak ada hubungannya ya? Tapi cuek aja deh, wong ini
tutorial saya yang bikin kok, kalau anda yang buat terserah anda. Kan adil? hehehe)
Coba seperti ini :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
I,U { color: red }
B { color : green }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <U>sugesti</U> terhadap <B>diri kita
sendiri</B>
</BODY>
</HTML>
Anda lihat saya hanya mengubah beberapa huruf serta menambah beberapa perintah saja, dan hasilnya
wow... mengagumkan.
Sekarang sudah jelas mengapa saya katakan css dapat menghemat kode dan waktu anda dalam mendesain
tampilan situs anda. Jika suatu kali anda bosan dengan warna atau bentuk tulisan pada tampilan situs anda,
hanya dengan mengubah dan menambah variasi dari perintah css anda akan mendapatkan tampilan yang
lebih menarik bukan? Dan juga benar-benar menghemat waktu.
Ketentuan Yang Mendasar
Sampai saat ini anda sudah dapat melihat kehebatan dan kemampuan yang dimiliki Style Sheet, mari kita
kembali berkutat dikubangan untuk mengingat aturan dasar yang ada dalam css ini.
Pada contoh di atas, baris ini!
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, Pasti bingung? Lihat contoh!
B {color: lime; text-decoration: underline; font-family: Arial}
ini baru dapat kita katakan sebagai css yang valid. Rumit? Belum tentu, anda jangan memvonis dulu
sebelum disidangkan (lho... apa hubungannya ya?). 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 enam-puluh keywords (kata-kunci), dan anda akan sering-sering bergaul
dengan mereka seiring dengan pemahaman tutorial ini.
Selectors juga dapat di kelompokkan, seperti contoh di bawah, 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 */
Sebagai catatan, anda juga dapat memasukkan komentar didalam blok komentar /* 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 anda lihat ulang contoh-contoh sebelumnya, maka akan terlihat beginilah garis besar dari methode
yang digunakan. TAPI INI HANYA BERLAKU UNTUK DOKUMEN INI SAJA (lihat pakai huruf
kapital untuk menegaskan hehehe...), yang menimbulkan sedikit masalah jika kamu ingin menerapkan css
untuk keseluruhan halaman web. Tidak perlu khawatir... pemecahannya semudah membalikkan beras
segoni (lho? Susah ya!), saya jadi teringat waktu ibu saya nyuruh saya beli beras ke tokonya pak bedoel,
beras udah saya bayar eh.. pak bedoel ngotot uangnya kurang. Padahal tau nggak saya ngasih udah pas,
malah… hehehe.. tuh khan udah mulai ngelantur (",) dasar payah aku ya?
Bersambung
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>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<I> lebih mudah</I>?
<P>
J: Karena itu merupakan <I>sugesti</I> terhadap <I>diri kita
sendiri</I>
</BODY>
</HTML>
Anda lihat saya mengganti huruf "B" dengan Huruf "I", sehingga jika menurut kebiasaan browser
(berlebihan tidak bahasanya?) akan menganggap baris yang diberi tag tersebut menjadi ITALIC. Sekarang
lihat hasilnya pada browser. Timbul pertanyaan bagaimana jika untuk UNDERLINE atawa garis di bawah
huruf? Ya benar, hal ini juga masih berlaku.
Nah.. sekarang saya ingin mencoba sedikit pemahaman anda ☺ !
Jika saya ingin kata "suatu pekerjaan" dari contoh di atas menjadi berwarna merah dan ITALIC, terus
kata "lebih mudah" kita buat menjadi berwarna hijau dan BOLD, terus untuk menambah kebingungan
anda jadikan kata "sugesti" dengan UNDERLINE dan berwarna merah, serta kata "diri kita sendiri"
menjadi hijau dan BOLD.
Saya kehendaki tampilannya seperti itu pada browser bagaimana? ehm.. menurut anda, membuat kode
HTML nya? Susah? Wah... payah deh (",) ---> ini senyum, tapi kalau mau yang lebih mantab lagi seperti
ini c",) --> isn't it cool, huh? (ini macemnya gak ada hubungannya ya? Tapi cuek aja deh, wong ini
tutorial saya yang bikin kok, kalau anda yang buat terserah anda. Kan adil? hehehe)
Coba seperti ini :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
I,U { color: red }
B { color : green }
</STYLE>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <I>suatu pekerjaan</I> itu mudah
maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B>?
<P>
J: Karena itu merupakan <U>sugesti</U> terhadap <B>diri kita
sendiri</B>
</BODY>
</HTML>
Anda lihat saya hanya mengubah beberapa huruf serta menambah beberapa perintah saja, dan hasilnya
wow... mengagumkan.
Sekarang sudah jelas mengapa saya katakan css dapat menghemat kode dan waktu anda dalam mendesain
tampilan situs anda. Jika suatu kali anda bosan dengan warna atau bentuk tulisan pada tampilan situs anda,
hanya dengan mengubah dan menambah variasi dari perintah css anda akan mendapatkan tampilan yang
lebih menarik bukan? Dan juga benar-benar menghemat waktu.
Ketentuan Yang Mendasar
Sampai saat ini anda sudah dapat melihat kehebatan dan kemampuan yang dimiliki Style Sheet, mari kita
kembali berkutat dikubangan untuk mengingat aturan dasar yang ada dalam css ini.
Pada contoh di atas, baris ini!
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, Pasti bingung? Lihat contoh!
B {color: lime; text-decoration: underline; font-family: Arial}
ini baru dapat kita katakan sebagai css yang valid. Rumit? Belum tentu, anda jangan memvonis dulu
sebelum disidangkan (lho... apa hubungannya ya?). 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 enam-puluh keywords (kata-kunci), dan anda akan sering-sering bergaul
dengan mereka seiring dengan pemahaman tutorial ini.
Selectors juga dapat di kelompokkan, seperti contoh di bawah, 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 */
Sebagai catatan, anda juga dapat memasukkan komentar didalam blok komentar /* 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 anda lihat ulang contoh-contoh sebelumnya, maka akan terlihat beginilah garis besar dari methode
yang digunakan. TAPI INI HANYA BERLAKU UNTUK DOKUMEN INI SAJA (lihat pakai huruf
kapital untuk menegaskan hehehe...), yang menimbulkan sedikit masalah jika kamu ingin menerapkan css
untuk keseluruhan halaman web. Tidak perlu khawatir... pemecahannya semudah membalikkan beras
segoni (lho? Susah ya!), saya jadi teringat waktu ibu saya nyuruh saya beli beras ke tokonya pak bedoel,
beras udah saya bayar eh.. pak bedoel ngotot uangnya kurang. Padahal tau nggak saya ngasih udah pas,
malah… hehehe.. tuh khan udah mulai ngelantur (",) dasar payah aku ya?
Bersambung
Comments
Post a Comment
thanks