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).
» Read More...
Bagaima kalau pengkodean CSS dalam mengganti warna kita gunakan kode RGBnya? Seperti standarnya html.
Seperti dibawah ini, kita tinggal ganti saja untuk mendapat variasi warna.
<STYLE TYPE="text/css">
B { color : #CC6633 }
</STYLE>
Akan sama mudahnya dengan html, apalagi bagi yang sudah mahir html.
Contoh lainnya yang saya modifikasi :
<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>
Saya mengganti huruf “B” dengan huruf “I”, sehingga apa? Sehingga teks yang di beri tag <I> tersebut berubah menjadi ITALIC. Silahkan cek di browser kalau tidak percaya. Bagaimana caranya untuk garis di bawah huruf atau UNDERLINE?
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 ingin tampilan di browser seperti demikian. Bagaimana menurut anda membuat kode HTMLnya? Sulit? Jawabannya “TIDAK!!!” kalau anda bilang “Sulit” berarti You’re Looser!!! Lebih pecundang daripada Squidword yang lagi depresi menghadapi Sponge Bob. :D hahaha... (maaf sedikit ngawur, tapi tidak apa-apa, kan ini tutorial saya. :P).
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>
Did you see that??!!! I did it! Tanpa harus berpanjang-panjang kode saya bisa melakukan itu semua. Sekarang sudah jelas mengapa saya katakan CSS lebih baik untuk mendisain tampilan webnya?. 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.
» Read More...
Kerjakanlah dari yang mudah dahulu “itu kata guru saya waktu SMA kalau mau mengerjakan sesuatu”, tapi memang benar (padahal emang gak bisa bikin yang susah).
Just copas! Copy-paste kode HTML berikut.
<HTML>
<HEAD>
</HEAD>
<BODY>
P: <B>Pekerjaan</B> akan menjadi mudah kalau kita anggap <B>mudah,</B> bukan begitu?
<P>
J: Benar, karena kita <B>mensugestikan</B> kemudahan <B>pada diri sendiri</B>
</BODY>
</HTML>
Ada beberapa kata pada kalimat diatas yang menjadi tebal, itu karena tag <B> dan </B> fungsinya memberi perintah BOLD.
Sekarang kita memberi warna pada teks yang di tebalkan tadi :
<HTML>
<HEAD>
</HEAD>
<BODY>
P: <B><FONT COLOR=”Lime”>Pekerjaan</FONT></B> akan menjadi mudah kalau kita anggap <B><FONT COLOR=”Lime”>mudah,</FONT></B> bukan begitu?
<P>
J: Benar, karena kita <B><FONT COLOR=”Lime”>mensugestikan</FONT></B> kemudahan <B><FONT COLOR=”Lime”>pada diri sendiri</FONT></B>
</BODY>
</HTML>
Bagaimana hasil di browser? Sudah berwarna bukan? Teks tebal berwarna hijau.
Kita bandingkan kemudahan yang didapat jika menggunakan CSS (Cascading Style Sheet).
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B { color : lime }
</STYLE>
</HEAD>
<BODY>
P: <B>Pekerjaan</B> akan menjadi mudah kalau kita anggap <B>mudah,</B> bukan begitu?
<P>
J: Benar, karena kita <B>mensugestikan</B> kemudahan <B>pada diri sendiri</B>
</BODY>
</HTML>
So, dilihat dari hasil, kedua koding diatas menghasilkan output yang sama, what the different? Bedanya dalam CSS kita lebih mudah untuk mengaturnya, dan lebih singkat dalam menulis kodenya.
Santai, ini masih “Piece of Cake". Kita lanjutkan nanti. :)
» Read More...
