Apa artinya "Cascade" dalam Cascading Style Sheets?

Cascading Style Sheets atau CSS disiapkan sehingga Anda dapat memiliki banyak properti yang semuanya memengaruhi elemen yang sama. Beberapa properti tersebut dapat saling bertentangan. Misalnya, Anda dapat mengatur warna font merah pada tag paragraf dan kemudian, nanti, mengatur warna font biru. Bagaimana peramban tahu warna mana yang membuat paragraf? Ini diputuskan oleh kaskade.

Jenis-jenis Style Sheets

Ada tiga jenis lembar gaya yang berbeda:

1. Penulis Style Sheets
   1. Ini adalah style sheet yang dibuat oleh penulis halaman web. Mereka adalah apa yang kebanyakan orang pikirkan ketika mereka berpikir tentang style sheet CSS.
2. Lembar Gaya Pengguna
   1. Lembar gaya pengguna ditetapkan oleh pengguna halaman Web. Ini memungkinkan pengguna untuk lebih mengontrol bagaimana tampilan halaman.
3. Lembar Gaya Agen Pengguna
   1. Ini adalah gaya yang diterapkan browser Web ke halaman untuk membantu menampilkan halaman itu. Misalnya, di XHTML, sebagian besar agen pengguna visual menampilkan tag sebagai teks yang dicetak miring. Ini didefinisikan dalam lembar gaya agen pengguna.

Properti yang didefinisikan di masing-masing lembar gaya di atas diberi bobot. Secara default, style sheet penulis memiliki berat paling banyak, diikuti oleh style sheet pengguna, dan terakhir oleh style style agen pengguna. Satu-satunya pengecualian untuk ini adalah dengan aturan penting dalam style sheet pengguna. Ini memiliki berat lebih dari lembaran gaya penulis.

Cascading Order

Untuk menyelesaikan konflik, peramban web menggunakan urutan penyortiran berikut untuk menentukan gaya yang didahulukan dan akan digunakan:

1. Pertama, cari semua deklarasi yang berlaku untuk elemen yang dipermasalahkan, dan untuk jenis media yang ditetapkan.
2. Kemudian lihat apa style sheet itu berasal. Seperti di atas, style sheet penulis datang pertama, kemudian pengguna, lalu agen pengguna. Dengan gaya pengguna penting yang memiliki prioritas lebih tinggi daripada gaya penting pembuat.
3. Selektor yang lebih spesifik adalah, lebih diutamakan. Misalnya, gaya pada "div.co p" akan memiliki prioritas yang lebih tinggi daripada hanya pada tag "p".
4. Akhirnya, mengurutkan aturan berdasarkan urutan yang ditentukan. Aturan yang ditentukan kemudian dalam pohon dokumen memiliki prioritas yang lebih tinggi daripada yang didefinisikan sebelumnya. Dan aturan dari style sheet impor dipertimbangkan sebelum aturan secara langsung di style sheet.