Pengenalan HTML 16
Styling CSS ke Tag HTML Langsung

4. Mengenal warisan (inheritance) dan cascade

Kata "Cascade" pada CSS berarti air terjun: aturan mengalir dari atas ke bawah dan dari induk ke anak. Sifat tertentu seperti color, font-family, dan font-size diwariskan. Jika kamu mengatur color pada body, semua paragraf, span, dan teks di dalamnya ikut berwarna sama, kecuali ada aturan yang lebih spesifik. Ibaratnya peraturan umum sekolah berlaku untuk semua kelas, tetapi kelas tertentu boleh membuat aturan tambahan yang lebih khusus.

Sebaliknya, sifat seperti padding, background-color, dan border tidak diwariskan. Karena itu pada contoh sebelumnya div diberi latar sendiri, sedangkan warna teks body mengalir ke semua anak.

<style>
body { color: #334155; font-family: Arial, sans-serif; }
p    { color: #0f766e; }
</style>

<body>
    <span>Aku mewarisi warna dari body</span>
    <p>Aku punya aturan sendiri sehingga berwarna hijau</p>
</body>

Pada contoh itu, span tidak punya aturan sendiri sehingga memakai warna dari body, sedangkan p menggunakan aturannya sendiri karena lebih dekat ke elemen tersebut.

5. Bila dua aturan bertabrakan

Apa yang terjadi bila dua aturan mengatur properti yang sama pada elemen yang sama? Browser memakai dua pertimbangan: aturan yang lebih spesifik menang, dan bila setara, aturan yang ditulis paling akhir menang. Selector tag seperti p kurang spesifik dibanding selector class, dan selector class kurang spesifik dibanding selector id. Style yang ditulis langsung di atribut style bahkan mengalahkan semuanya. Karena itu, bila gayamu tidak berubah, periksa dulu apakah ada aturan lain yang lebih kuat atau yang muncul sesudahnya.

6. Kesalahan yang sering terjadi

• Lupa titik koma di akhir deklarasi, sehingga deklarasi berikutnya ikut dibatalkan.
• Menulis div { lalu lupa menutup dengan kurung kurawal, yang membuat seluruh aturan setelahnya diabaikan.
• Memberi warna teks yang sama dengan warna latar sehingga tulisan seolah hilang.
• Memakai selector tag yang terlalu umum, misalnya div, lalu heran karena semua div termasuk yang di menu ikut berubah.
• Menaruh tag <style> di luar head pada halaman besar sehingga sulit dilacak.

7. Ringkasan

8. Latihan

1. Jika body diberi color: navy; dan tidak ada aturan lain, warna apa yang dipakai paragraf di dalamnya?
   Lihat jawaban

   Biru tua (navy), karena properti color diwariskan dari body.
2. Tuliskan aturan agar semua span berwarna merah dan tebal.
   Lihat jawaban

   span { color: red; font-weight: bold; }
3. Dua aturan untuk p sama-sama mengatur warna. Aturan mana yang dipakai?
   Lihat jawaban

   Yang ditulis paling akhir, karena spesifisitasnya sama.
4. Mengapa padding pada div tidak ikut dialami elemen anaknya?
   Lihat jawaban

   Karena padding bukan properti yang diwariskan; ia hanya berlaku pada elemen yang diberi aturan.