Melanjutkan kembali konsep dasar yang sudah dipelajari : pewarisan (inheritance), kelas (classes), pseudo-classes, dan selectors-kontekstual (Contextual Selector). Coba kita bahas satu persatu :
Pewarisan (Inheritance) :
Pewarisan pada dasarnya berarti bagian-bagian HTML yang kekurangan untuk sfesifikasi aturan CSS dapat mengikuti/dibuat menurut aturan CSS yang menutupinya (@#$%... bingung bukan?? Berarti saya hebat selain bikin bingung orang lain, saya juga membingungkan diri sendiri hehehe). Pokoknya seperti inilah, setiap aturan yang tidak ada pada HTML atau ingin menggantikannya dengan aturan CSS, tetap akan mempengaruhi huruf yang ada didalam kurungan CSS (tambah ruwed ya? Maaf ya gan, saya bukan penulis handal soalnya. :D). Nih contohnya aja, siapa tau kalau liat contoh bisa ngerti dan ngejelasin ke saya :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B { color : green }
</STYLE>
</ HEAD>
<BODY>
<B>
P: Mengapa jika kita anggap <FONT SIZE="+1">suatu
pekerjaan</FONT> itu mudah
maka pekerjaan itu akan beneran menjadi lebih mudah?
<P>
J: Karena itu merupakan sugesti terhadap diri kita
sendiri</B>
</BODY>
</HTML>
Nah, sekarang baru ngertikan? Tag <B> mendefinisikan warna dan menebalkan huruf dengan aturan CSS, sedangkan tag <FONT> yang notabene berada didalam lingkup CSS dapat menerapkan aturan HTML dasar tetapi tetap terpengaruh dengan kondisi warna dan tebalnya huruf. Sesekali ini juga dapat digunakan sebagai kombinasi sesuai dengan keperluan anda sendiri. (hmm... kali ini lebih jumawa dan berwibawa sekali ya?)
Classes :
CSS juga mengijinkan kita untuk menyatukan elemen-elemen secara bersamaan didalam sebuah kelas (classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class. Sebagai contoh :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.tanya {color: red}
.jawab {color: blue}
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
P: Mengapa jika kita anggap suatu pekerjaan itu mudah
maka pekerjaan itu akan beneran menjadi lebih mudah?
<P CLASS="jawab">
J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT>
terhadap diri kita sendiri
</BODY>
</HTML>
Kali ini kita mendefinisikan dua kelas yaitu "tanya" dan "jawab" dengan mengaplikasikan aturan CSS. Dari sini kita bisa lihat kalu kedua kelas itu tidak harus sama dan bisa di modifikasi sesuai dengan kepentingan keinginan dan kebutuhan kita (udah berapa kali kata-kata ini diulang, tapi lagi-lagi cuek aja deh). Yang terpenting sekarang setidaknya kita sudah bisa membuat sebuah kelas.
Selektor Kontekstual (Contextual-Selector)
Selektor Kontekstual hampir mirip dengan pernyataan-pernyataan kondisional - deklarasi Style-Sheet yang ada akan berpengaruh jika kondisi/keadaan tertentu dijumpai. Sebagai contoh, anggap anda ingin membuat semua teks yang bold dan italic tampil dengan huruf arial dan berwarna biru. Selektor-Kontekstual nya akan seperti ini :
<HEAD>
<STYLE TYPE="text/css">
B I {color: blue; font-family: Arial} /* selector ini kesemuanya untuk
bold+italic text */
</STYLE>
</HEAD>
Ayo dicoba, jangan sekedar bacanya saja! Apa mata saya kelihatan sedang berbohong? (mana matanya?) Tentu TIDAK. Biasanya ka..ka..la..u ber..bo..hong ss ssaya nggo..mongnya ter..ba..ba..ta..bata. hehehe just kidding!
CSS menawarkan berbagai macam cara untuk mengganti warna. Paling mudah adalah dengan menggunakan salah satu dari pre-defined warna yang ada - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Kamu juga dapat menggunakan kombinasi warna heksadesimal dengan menambahkan atribut # (tanda kreiss).
I {color: #0000FF)
Atau nilai kombinasi RGB dalam nilai absolut terhadap persen, seperti ini :
I {color: rgb (0, 0, 255))
I {color: rgb (0%, 0%, 100%))
Kita dapat mengubah kombinasi warna sesuai dengan gaya yang kita sukai.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.blue {color: cyan; background-color: #FF8000}
.green {color: lime; background-color: black}
</STYLE>
</HEAD>
<BODY>
<P CLASS="blue">
Sebenernya semua pekerjaan itu mudah!
<P CLASS="green">
Setuju, tapi tak semudah mengatakannya
</BODY>
</HTML>
Look at that! Kita bisa membuat website kita warna-warni, karna di balik warna punya cerita. (kaya acara tv saja ya).
Pewarisan (Inheritance) :
Pewarisan pada dasarnya berarti bagian-bagian HTML yang kekurangan untuk sfesifikasi aturan CSS dapat mengikuti/dibuat menurut aturan CSS yang menutupinya (@#$%... bingung bukan?? Berarti saya hebat selain bikin bingung orang lain, saya juga membingungkan diri sendiri hehehe). Pokoknya seperti inilah, setiap aturan yang tidak ada pada HTML atau ingin menggantikannya dengan aturan CSS, tetap akan mempengaruhi huruf yang ada didalam kurungan CSS (tambah ruwed ya? Maaf ya gan, saya bukan penulis handal soalnya. :D). Nih contohnya aja, siapa tau kalau liat contoh bisa ngerti dan ngejelasin ke saya :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B { color : green }
</STYLE>
</ HEAD>
<BODY>
<B>
P: Mengapa jika kita anggap <FONT SIZE="+1">suatu
pekerjaan</FONT> itu mudah
maka pekerjaan itu akan beneran menjadi lebih mudah?
<P>
J: Karena itu merupakan sugesti terhadap diri kita
sendiri</B>
</BODY>
</HTML>
Nah, sekarang baru ngertikan? Tag <B> mendefinisikan warna dan menebalkan huruf dengan aturan CSS, sedangkan tag <FONT> yang notabene berada didalam lingkup CSS dapat menerapkan aturan HTML dasar tetapi tetap terpengaruh dengan kondisi warna dan tebalnya huruf. Sesekali ini juga dapat digunakan sebagai kombinasi sesuai dengan keperluan anda sendiri. (hmm... kali ini lebih jumawa dan berwibawa sekali ya?)
Classes :
CSS juga mengijinkan kita untuk menyatukan elemen-elemen secara bersamaan didalam sebuah kelas (classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class. Sebagai contoh :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.tanya {color: red}
.jawab {color: blue}
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
P: Mengapa jika kita anggap suatu pekerjaan itu mudah
maka pekerjaan itu akan beneran menjadi lebih mudah?
<P CLASS="jawab">
J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT>
terhadap diri kita sendiri
</BODY>
</HTML>
Kali ini kita mendefinisikan dua kelas yaitu "tanya" dan "jawab" dengan mengaplikasikan aturan CSS. Dari sini kita bisa lihat kalu kedua kelas itu tidak harus sama dan bisa di modifikasi sesuai dengan kepentingan keinginan dan kebutuhan kita (udah berapa kali kata-kata ini diulang, tapi lagi-lagi cuek aja deh). Yang terpenting sekarang setidaknya kita sudah bisa membuat sebuah kelas.
Selektor Kontekstual (Contextual-Selector)
Selektor Kontekstual hampir mirip dengan pernyataan-pernyataan kondisional - deklarasi Style-Sheet yang ada akan berpengaruh jika kondisi/keadaan tertentu dijumpai. Sebagai contoh, anggap anda ingin membuat semua teks yang bold dan italic tampil dengan huruf arial dan berwarna biru. Selektor-Kontekstual nya akan seperti ini :
<HEAD>
<STYLE TYPE="text/css">
B I {color: blue; font-family: Arial} /* selector ini kesemuanya untuk
bold+italic text */
</STYLE>
</HEAD>
Ayo dicoba, jangan sekedar bacanya saja! Apa mata saya kelihatan sedang berbohong? (mana matanya?) Tentu TIDAK. Biasanya ka..ka..la..u ber..bo..hong ss ssaya nggo..mongnya ter..ba..ba..ta..bata. hehehe just kidding!
CSS menawarkan berbagai macam cara untuk mengganti warna. Paling mudah adalah dengan menggunakan salah satu dari pre-defined warna yang ada - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow. Kamu juga dapat menggunakan kombinasi warna heksadesimal dengan menambahkan atribut # (tanda kreiss).
I {color: #0000FF)
Atau nilai kombinasi RGB dalam nilai absolut terhadap persen, seperti ini :
I {color: rgb (0, 0, 255))
I {color: rgb (0%, 0%, 100%))
Kita dapat mengubah kombinasi warna sesuai dengan gaya yang kita sukai.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.blue {color: cyan; background-color: #FF8000}
.green {color: lime; background-color: black}
</STYLE>
</HEAD>
<BODY>
<P CLASS="blue">
Sebenernya semua pekerjaan itu mudah!
<P CLASS="green">
Setuju, tapi tak semudah mengatakannya
</BODY>
</HTML>
Look at that! Kita bisa membuat website kita warna-warni, karna di balik warna punya cerita. (kaya acara tv saja ya).
» Read More...
