Belajar CSS : Urutan Prioritas Selector CSS (Cascading)

Assalamu'alaikum wr.wb

Pada postingan kali ini saya akan membahas Urutan Prioritas Selector CSS (Cascading). Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS (Cascading) ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading.


Pengertian Cascading dari CSS
CSS adalah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.

Mengenai kata “prioritas” untuk kode CSS, saya akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas tentang prioritas CSS dilihat dari kespesifikannya.
 


Efek Cascading berdasarkan sumber kode CSS
Misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS menggunakan external style sheet untuk merubah tag header tersebut menjadi merah. Namun pada saat yang sama kita  juga membuat internel style sheet untuk mengubahnya menjadi warna hijau, maka warna apakah yang akan tampil di browser?

Untuk mengujinya marilah kita mencobanya secara langsung, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan kode CSS berikut:

Lalu buat file HTML, saya menggunakan prioritas.html, simpanlah kedua file pada folder yang sama:

Perhatikan bahwa sebelum tag <style>, saya “memanggil” file prioritas.css terlebih dahulu. Lalu pada tag <h2> yang kedua saya menambahkan atribut “color:blue” pada tag <h2>.

Jika kita menjalankan kode HTML diatas, warna text pada kedua tag <h2> akan bewarna hijau dan biru, dan tidak ada yang bewarna merah.

Dari contoh sederhana diatas, tag <h2> sebenarnya “dikenakan” atau “diubah” oleh 3 property CSS yang sama secara bersamaan, yakni ketiga selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu kode yang akan “menang”.

Dalam masalah ‘timpa-menimpa’ ini,  CSS memiliki aturan prioritas tersendiri. Jika terdapat property CSS yang saling ‘bentrok’,  maka urutan prioritasnya adalah sebagai berikut (dari yang paling kuat):

1. Inline style, yakni style yang langsung melekat pada tag.
2. Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>). 
3. Eksternal style, yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import.

Maka jika melihat sekali lagi kode HTML diatas, text “Warna 1” akan berwarna hijau karena internal style color:green lebih mendapat prioritas lebih tinggi daripada external style color:red.
Sedangkan text “Warna 2” berwarna biru karena inline style color:blue lebih mendapat prioritas daripada external style color:red maupun internal style color:green.

Sekian pembahasan tentang Urutan Prioritas Selector CSS (Cascading).

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb