Cascading? Apa artinya? Apa yang dimaksudkan oleh si penemu CSS dengan memberi nama seperti itu? Jika Anda cari terjemahannya dalam kamus, maka dijamin bukannya mengerti malahan hilang akal. Ya, terjemahannya adalah air terjun atau mengalir kebawah. Tidak mudah menghubungkan arti ini dengan pengertian kita tentang CSS. Untungnya, W3C dapat membantu kita disini. Jika kita ambil pengertian cascading CSS menurut W3C, maka cascading berarti suatu urutan prioritas bagaimana aturan CSS yang saling  bertentangan diterapkan. Jadi, ini berhubungan dengan bagaimana CSS menentukan aturan gaya yang mana yang harus digunakan untuk suatu elemen HTML sementara tersedia beberapa pilihan. Misalkan, ada dua aturan CSS seperti ini:

p {color: white; background: darkblue;}
p {color: yellow; background: black;}

Aturan CSS diatas sama-sama mengatur tag <p> dan properti paragrap yang sama, yaitu warna teks dan warna latar belakang. Mana yang akan digunakan oleh CSS untuk menampilkan paragrap ditentukan oleh sistem cascading dalam CSS. Mari kita lihat bagaimana sebernarnya sistem prioritas menurut cascading CSS ini.

Beberapa Jenis Style Sheets

Sebelumnya, perlu Anda ketahui bahwa style sheets (kumpulan aturan CSS, biasanya kita simpan dalam sebuah file berakhiran .css) yang kita buat lalu digunakan oleh browser untuk mengatur tampilan halaman web, dibagi menjadi 3 jenis, yaitu:

1. style sheets author. Ini adalah style sheets yang dibuat oleh pemilik situs. Jika Anda pernah menggunakan CSS untuk membuat situs, Anda pasti sudah kenal dengan jenis ini. Ini adalah jenis yang paling banyak dijumpai.
2. style sheets user - style sheets yang dibuat oleh si pengguna atau pengunjung situs. Terkadang pengguna ingin mengubah penampilan suatu halaman web, misalnya mengubah ukuran huruf agar lebih mudah dibaca.Jenis ini memungkinkan pengguna mengatur penampilan suatu halaman web
3. style sheets user-agent - istilah user-agent disini mewakili suatu browser atau screen reader (software pembaca halaman web untuk mereka yang berpenglihatan tidak normal). Ini adalah style sheets yang terkandung didalam browser. Contoh, sesuai dengan style sheetsnya, secara default browser akan menampilkan elemen <em> dengan huruf miring.

Aturan CSS yang ada didalam setiap style sheets diatas memiliki prioritas yang berbeda. Aturan CSS  yang digunakan dalam style sheets author akan memiliki prioritas tertinggi, diikuti oleh style sheets user dan terakhir style sheets user-agent. Jadi, jika ada aturan CSS untuk mengatur paragrap terdapat di style sheets author dan user, maka aturan yang digunakan adalah yang berada dalam style sheets author. Dalam contoh diatas, jika aturan yang pertama terdapat dalam style sheets author dan satunya lagi dalam style sheets user, maka paragrap akan ditampilkan dengan warna teks putih dan background biru.

Mengubah Prioritas

Meskipun demikian, prioritas ini dapat diubah, yaitu dengan menggunakan perintah !important. Dengan perintah ini, maka aturan yang menggunakan perintah ini, akan digunakan oleh browser meskipun memiliki prioritas yang lebih rendah. Sebagai contoh, jika kedua contoh aturan CSS diatas diubah seperti ini:

p {color: white; background: darkblue;}
p {color: yellow !important;
    background: black !important;}

Maka paragrap sekarang akan ditampilkan dengan warna teks kuning dan background hitam. Sekarang prioritas sudah berubah, aturan paragrap yang terdapat pada style sheets user akan memiliki prioritas lebih tinggi daripada aturan paragrap pada style sheets author, sehingga aturan ini yang akan digunakan oleh browser.

Mekanisme Cascading

Aturan ini pada dasarnya menentukan urutan prioritas aturan CSS. Cara kerja browser dalam menentukan prioritas atau menentukan deklarasi aturan mana yang akan digunakan pada suatu elemen HTML adalah sebagai berikut:

• Pertama, browser akan mencari seluruh deklarasi yang diterapkan pada suatu elemen
• Kedua, browser akan memeriksa berasal dari style sheets jenis apa deklarasi tersebut berada
• Ketiga, memeriksa seberapa spesifik suatu selektor. Semakin spesifik, semakin tinggi prioritasnya. Sebagai contoh, aturan gaya selektor p pada deklarasi 'div p' akan memiliki prioritas lebih tinggi daripada pada 'p' saja.
• Terakhir, melihat urutan pendefinisiannya. Aturan gaya yang didefinisikan lebih akhir akan memiliki prioritas tertinggi. Misalnya, aturan gaya yang dideklarasikan menggunakan atribut 'style' pada suatu elemen HTML akan berprioritas lebih tinggi daripada yang dideklarasikan pada suatu file eksternal yang disertakan oleh dokumen HTML yang bersangkutan. Hal ini karena style sheets dibaca oleh browser dari atas kebawah. Kode untuk menyertakan file eksternal CSS ada dibagian HEAD, sementara atribut 'style' pada suatu elemen HTML ada dibagian BODY. 

Dengan mengetahui sifat cascading dalam CSS ini, memberikan kelebihan bagi kita dalam menggunakan CSS. Kita akan menjadi tahu seandainya aturan CSS yang kita buat ternyata tidak berefek pada tampilan, salah satu kemungkinan yang terjadi adalah masalah prioritas ini.
Demikianlah artikel tentang sifat cascading dalam CSS ini. Semakin mengenal CSS, kita akan lebih leluasa memanfaatkan semua kelebihannya untuk memperoleh tampilan situs yang menawan. Mudah-mudahan bermanfaat.

Tidak seperti bahasa lain, CSS tidak memiliki versi melainkan level atau tingkatan. Setiap tingkat   CSS yang lebih tinggi dibangun atas dasar tingkat yang lebih rendah atau sebelumnya. Tingkat yang lebih tinggi memiliki tambahan fitur dan definisi atau ketentuan yang telah diperbaiki. Dengan cara demikian, CSS memelihara kompatibilitas antara CSS level 1 dengan CSS level 2 dan 3. Level CSS tertinggi memiliki definisi terbaik dan fitur paling lengkap. CSS (Cascading Style Sheet) adalah salah satu dari 3 bahasa utama web yang wajib dikuasai master desain web. Menurut badan web  dunia W3C, CSS adalah sebuah mekanisme sederhana untuk menambahkan style atau gaya (misalnya font, color, spacing) ke dokumen HTML. Keberadaan CSS mendukung konsep pemisahan antara aspek konten dengan presentasinya.

Level CSS

Ada tiga tingkat CSS saat ini, level 1, 2, dan 3. W3C telah menentukan spesifikasi CSS level 1 telah usang (obsolete). Berdasarkan pengalaman penerapan dan tinjauan lebih jauh, ternyata spesifikasi CSS 2 mengalami banyak permasalahan. W3C memutuskan, daripada menyelesaikan permasalahan tersebut, W3C lebih memilih mengeluarkan rekomendasi baru yaitu spesifikasi CSS 2.1. Spesifikasi CSS 3 dibangun modul demi modul berdasarkan CSS 2 dengan menggunakan spesifikasi CSS 2.1 sebagai intinya. Untuk menghindari kontradiksi dengan spesifikasi CSS 2.1, W3C hanya menambahkan fungsionalitas dan memperbaiki definisi yang sudah ada. Setiap modul yang sudah lengkap kemudian dipasang pada sistem CSS 2.1 ditambah dengan modul-modul lain yang sudah lengkap sebelumnya.

Ketenaran CSS

Penelitian yang dilakukan oleh W3C disini menunjukkan bahwa CSS telah digunakan oleh kurang lebih 90% situs web yang ada di internet. Ini screenshot hasil penelitian tersebut:

Penelitian menggunakan data sampel 10 milyar situs web paling top yang diambil sebelum Juni 2013. Penentuan situs mana yang masuk kategori menggunakan hasil perangkingan situs web oleh Alexa, perusahan dari situs amazon.com. Data rangking yang diambil merupakan data rata-rata rangking selama 3 bulan.

Ingin Belajar CSS?

Banyak sumber yang menyediakan resource atau sumber daya belajar dalam bentuk tutorial, contoh-contoh kode dan penerapan, dan berbagai alat (tools). Salah satu sumber yang cukup berdaya guna dapat dikunjungi melalui alamat http://www.w3.org/Style/CSS/. Sumber ini dibuat oleh W3C berisi berbagai pengetahuan CSS yang sebaiknya diketahui dan dipelajari serta berbagai informasi terkini mengenai CSS.

CSS cukup mudah dipelajari karena bukan suatu bahasa pemrograman tetapi bahasa style. Aturan sintaks penulisan kode CSS cukup sederhana dan mudah diingat:

selektor {properti:nilai_properti;}

Contoh:

body {color: #f00; font-family:arial;}

Selektor bisa berupa sebuah elemen HTML atau kelas atau id CSS. Properti adalah atribut-atribut elemen HTML yang ingin diatur tampilannya, diikuti oleh nilai properti yang dipisahkan oleh tanda titik dua. Setiap satu kode CSS diakhiri dengan satu tanda titik koma. Contoh selengkapnya:

<html>
   <head><title>Contoh Penggunaan CSS</title></head>
   <style type="text/css">
      body {color: #f00; font-family:arial;}
   </style>
<body>
   <p>Warna tulisan ini merah karena diatur oleh CSS dengan perintah color:#f00</p>
</body>
</html>

Jika dokumen HTML diatas ditampilkan pada browser, maka teks paragrap akan berwarna merah dengan jenis huruf arial.

Memberi nama kelas CSS yang baik berdasarkan tips dari W3C adalah dengan berdasarkan semantik. Nama kelas yang baik seharusnya tidak akan pernah berubah. Pemberian nama kelas yang baik seharusnya menjawab pertanyaan “mengapa sesuatu tersebut perlu diatur agar tampil seperti itu?”, bukan pertanyaan “bagaimana seharusnya sesuatu tersebut tampil?”. Maksudnya adalah bahwa penampilan itu akan selalu berubah, tetapi alasan mengapa harus tampil seperti itu tidak akan berubah.

Untuk memperjelas pengertian diatas, mari kita lihat pemberian nama elemen HTML untuk menonjolkan bagian suatu teks. Elemen yang dimaksud adalah elemen bold atau tag <b> dan elemen strong atau tag <strong>. Kedua elemen sama-sama dimaksudkan untuk menonjolkan suatu bagian teks tetapi elemen strong mempunyai makna semantik yang lebih baik. Saat ini, teks yang ingin ditonjolkan berdasarkan kesepakatan internasional akan ditebalkan. Jika karena suatu alasan tertentu kesepakatan internasional tersebut diubah, misalnya untuk teks yang ditonjolkan akan ditampilkan dengan huruf kapital semua, maka nama elemen bold (tebal) tidak akan tepat lagi. Mungkin perlu diubah namanya menjadi elemen capital. Sedangkan elemen strong tetap elemen strong dan maksudnya tetap sesuai dengan perubahan baru.

Nama yang Baik

Nama-nama kelas seperti peringatan, penting, gambarunduhan, dan submenu adalah nama-nama yang baik. Nama-nama tersebut menjelaskan apa yang direpresentasikan bukan bagaimana sesuatu tersebut ditampilkan. Nama-nama tersebut tidak akan berubah, peringatan tetap peringatan, tidak peduli seberapa sering perubahan terjadi pada tampilan.

Nama yang Buruk

Nama-nama kelas seperti border4px, teksTebal, backgroundcantik bukanlah nama yang baik. Bagaimana seandainya border diubah ukurannya menjadi 5px? Tentu nama kelas tersebut menjadi tidak tepat lagi dan perlu diubah. Lalu, seiring waktu latar belakang yang tadinya terlihat cantik akan menjadi tidak cantik sama sekali. Hal ini bisa saja terjadi jika misalnya terjadi perubahan tren.

Salah satu kelebihan dari penggunaan CSS adalah tidak perlu melakukan perubahan yang banyak ketika dilakukan perubahan terhadap penampilan suatu situs. Hal ini sesuai dengan tujuan pembuatan bahasa CSS, yaitu memudahkan pengendalian tampilan halaman-halaman web suatu situs secara terpusat dari sebuah file CSS.


Referensi: W3C Quality Assurance - Tips for Webmaster