Tutorial Cascading Style Sheet (CSS)


Kata-kata Introduksi
Pernah dengar istilah di atas "Cascading Style Sheet" atau sering disebut CSS). Mungkin sebagian 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, CSS itu digunakan untuk memperindah tampilan situ.
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".

Anggap ini Mudah
Sekarang coba kita mulai dengan contoh-contoh yang ringan aja dulu.
Note: Kalau misalnya malas menyalin kode HTML nya, gunakan teknik 2 jurus yang sangat ampuh. Ya,
bener "kopi dan paste"
<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.

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, 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 mudah,

Sekali Tulis, Pakai Bersama
Satu dari beberapa kehebatan tekhnologi css ini – dan merupakan alasan banyak orang menyukai
penggunaannya – adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat
menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web
site anda.
Keuntungannya jelas sekali, jika kita ingin mengubah tampilan situs, kita tinggal mengedit satu file saja
dan hasilnya akan di refleksikan pada keseluruhan dokumen HTML yang dilink ke situ.
Anggap saja anda mempunyai Style-Sheet yang diberi nama "global.css" yang diletakkan pada server
"www.situskamu.com/global.css". Untuk memberikan pengaruh aturan Style-Sheet kesemua atau ke
spesifik dokumen HTML, gampangnya tambahkan saja kode sederhana ini di dalam tag <HEAD> pada
dokumen HTML anda, seperti ini :
<HEAD>
<LINK REL="stylesheet" HREF="http://www.situskamu.com/global.css&quot;
TYPE="text/css">
</HEAD>
dan semua aturan Style-Sheet dalam "global.css" secara automatis akan diterapkan kedalam dokumen
HTML yang ingin diberi Style-Sheet.
Kamu juga dapat mengimport Style-Sheet dengan menggunakan keyword (kata-kunci) "@import", mau
diberi contoh? Nih coba :
<STYLE TYPE="text/css">
@import url(http://www.situskamu.com/global.css);
P {color: yellow}
</STYLE>
kamu juga dapat menerapkan aturan CSS berdasarkan "case to case", dengan menambahkan atribut CSS
ke dalam kode HTML itu sendiri. Contohnya :
<HTML>
<HEAD>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B STYLE="color: lime; backgroundcolor:
black"> suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi <B STYLE="color:
lime; background-color: black"> lebih mudah</B>?
<P>
J: Karena itu merupakan <B STYLE="color: lime; backgroundcolor:
black">sugesti</B> terhadap <B STYLE="color: lime;
background-color: black">diri kita
sendiri</B>
</BODY>
</HTML>
bisakan? Nah sekarang baru percaya.

Lebih lanjut tentang Pseudo-Giberish
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 (@#$%… pasti bingungkhan dengan
penjabaranya? Sama, saya juga gak ngerti apa maksudnya � tulisan ini). 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 (waduh… kok kayaknya makin ribet aja sih?
Hehehe… dasar gak professional). Udah coba aja lihat contohnya mana tau aja ngerti? Tapi janji kalo’
udah ngerti kasih tau saya (lho.. dasar edan!) :
<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 sekarang dicoba! Apakah saya kelihatan sedang berbohong? Tentu tidak. Kebiasaan saya kalau
sedang berbohong mengedip-ngedipkan mata (abe: sedang berusaha agar matanya tidak berkedip-kedip
c",) hehehe gak ding cuman canda. Suer!
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>

Mencoba Berbagai Kemungkinan
Hmm, kita telah mempelajari ketentuan huruf dan bagaimana mengubahnya sehingga kita mendapati
beberapa variasi huruf. Dus, contoh di bawah ini tidak ada yang istimewa tetapi ‘ntar saya tunjukkan
perbedaannya.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: "Verdana"}
</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 sugesti terhadap diri kita sendiri
</BODY>
</HTML>
Anda mungkin sudah tahu jika huruf yang ingin ditampilkan tidak ada dalam font-properties di komputer
client, maka browser akan menampilkan default-font (biasanya Times New Roman). Dan disinilah CSS
mendapat nilai lebih, karena dengan menggunakan CSS kita dapat mencoba berbagai kemungkinan huruf
pada tag <FONT>. – CSS mengijinkan anda untuk membuat lebih dari satu kemungkinan sebagai
alternatif font.
P {font-family: "Verdana", "Arial", "Arial Black"} /* first try Verdana,
then Arial, then Arial Black */
Sudah mengerti kan? Jika font dengan type verdana tidak dijumpai, maka type arial lah yang digunakan.
Tetapi jika type arial ini juga tidak ada maka CSS akan memilih alternatif ketiga yaitu arial black.
Anda juga punya sejumlah pilihan untuk menentukan ukuran dari font. Karena CSS juga mempunyai
"font-size" properties yang dapat dipakai untuk berbagai jenis tampilan huruf. Sequence? Ya bener
berdasarkan urutan!
Pertama sekali yang paling penting saya jabarkan adalah penggunaan salah satu dari tujuh nilai dasar
berikut : "xx-small", "x-small", "small", "medium", "large", "x-large" and "xx-large". Coba contoh ini
untuk memahirkan :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.tanya {font-size: xx-small}
.jawab {font-size: x-large}
</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 sugesti terhadap diri kita sendiri
</BODY>
</HTML>
Kemudian kita juga dapat menambahkan atribut "larger" atau "smaller" kedalam kondisinya.
.tanya {font-size: larger} /* ukuran huruf akan lebih besar dari huruf parent */
.tanya {font-size: smaller} /* ukuran huruf akan lebih kecil dari huruf parent */
Juga, kita dapat mengubah dengan menentukan "point" atau "nilai persen". Supaya tidak
bingung dicoba aja contoh berikut (saya hanya ngasih petunjuknya saja) :
.tanya {font-size: 16pt} /* ukuran dengan 16 point */
.tanya {font-size: 300%} /* ukuran font diubah hingga tiga kali lebih besar */

Menambahkan Sedikit Style
Kita juga dapat menambah sedikit style pada teks dengan properti "font-style", dengan nilai "normal",
"oblique", dan "italic". Perhatikan ini :
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: serif; font-style: italic} /* font italic */
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
Q. Kenapa contoh yang diberikan tidak pernah diubah?
<P CLASS="jawab">
A. Karena si Abe sudah gak mau susah membuat contoh baru
</BODY>
</HTML>
Coba juga untuk "normal" dan "oblique"!
karena ini adalah contoh yang terakhir, maka akan saya berikan contoh properties
yang lain untuk semakin memperkaya pengetahuan anda yaitu "font-weight". Dimana properties ini
memberikan tekanan dengan kata kunci seperti "normal", "bold", "bolder" dan "lighter", atau dengan
memberikan skala antara 100 sampai 900. Lihat kembali:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.tanya {font-weight: bolder}
.jawab {font-weight: 900}
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
Q. Kenapa contoh pertanyaan tutorial ini tidak bervariasi?
<P CLASS="jawab">
A. Lho, jangan tanya saya. Tanya penulisnya.
</BODY>
</HTML>
Uhm… satu lagi, mungkin ini tidak begitu penting tetapi perlu (cemana sih? Kok jadi gak tegas begini).
Properti yang lain yaitu "font-variant" yang mengatur tingkat KAPITAL huruf. Pilihan yang dapat
diambil yaitu "small-caps" dan "normal". note : saya tidak jamin hal ini juga berlaku pada Netscape
browser.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-variant: small-caps}
/* mengganti semua karakter lower-case dengan karakter upper-case
*/
</STYLE>
</HEAD>
<BODY>
<P>
Q. Sekarang saya tanya tentang saran kamu kepada penulis?
<P>
A. Bagaimana kalau contohnya dibuat yang lain.
<P>
Q. Maksudnya bagaimana sih? Khan sekarang pertanyaannya sudah
saya ubah.
<P>
A. Yee… dasar tetep aja ngotot (sambil berlalu dengan cuek)
</BODY>
</HTML>
Mungkin kalau masih sanggup kita akan mempelajari bagaimana membuat "margins", "padding",
"borders", "padding", dan "background-images" pada tutorial CSS yang kedua.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: