Prinsip Kerja CSS

Pernah tidak kamu menulis kode CSS, tapi tampilannya tidak berubah sama sekali? Padahal selector-nya sudah benar. Jangan emosi dulu! Kemungkinan besar itu terjadi karena kamu belum paham Prinsip Kerja dari CSS.

Di materi ini, kita akan belajar tentang "hukum rimba" di dalam CSS:

siapa yang paling kuat, dialah yang akan tampil di browser

1. Penjelasan Konsep

Ada empat fondasi utama yang mengatur bagaimana CSS diterapkan:

1. Cascade (Air Terjun): Jika ada dua aturan yang kekuatannya sama, maka aturan yang ditulis paling terakhir (paling bawah) yang akan menang.
2. Specificity (Spesifikasi): Ini adalah sistem poin. Selector yang lebih spesifik akan menang melawan selector yang umum.
   • ID (#) punya poin paling tinggi.
   • Class (.) punya poin menengah.
   • Elemen (tag) punya poin paling rendah.
3. Inheritance (Pewarisan): Beberapa properti (seperti warna teks dan font) akan otomatis diturunkan dari elemen induk (parent) ke elemen anak (child).
4. !important: Ini adalah "kartu as". Jika ditambahkan pada sebuah properti, ia akan mengabaikan semua aturan Cascade dan Specificity.

2. Contoh Kode

Mari kita lihat sebuah contoh antar selector untuk mewarnai teks yang sama.

<h1 id="judul-blog" class="header-teks">
    Selamat Datang di Blog Saya
</h1>

/* Aturan 1: Element Selector (Skor: 1) */
h1 {
    color: red;
}

/* Aturan 2: Class Selector (Skor: 10) */
.header-teks {
    color: blue;
}

/* Aturan 3: ID Selector (Skor: 100) */
#judul-blog {
    color: green;
}

/* Aturan 4: Cascade (Urutan Penulisan) */
h1 {
    color: orange; /* Ini mengalahkan 'red' di atas, tapi kalah dari ID & Class */
}

/* Aturan 5: Inheritance */
body {
    font-family: Arial; /* H1 akan mewarisi font ini */
}

3. Penjelasan Kode

• Siapa pemenangnya? Teks akan berwarna Hijau.
• Kenapa? Meskipun ada aturan untuk h1 dan .header-teks, selector #judul-blog (ID) memiliki skor spesifisitas paling tinggi (100).
• Bagaimana dengan warna Orange? Warna orange sempat mengalahkan warna merah (karena ditulis belakangan/Cascade), tapi tetap tidak bisa mengalahkan Class (skor 10) apalagi ID (skor 100).
• Inheritance: Perhatikan bahwa kita tidak mengatur font-family di h1. Namun, karena kita mengaturnya di body, maka h1 otomatis ikut menggunakan font Arial.

Sekarang coba ubah file style.css kamu dengan menambahkan !important

/* Aturan 1: Element Selector (Skor: 1) */
h1 {
    color: red !important;
}

/* Aturan 2: Class Selector (Skor: 10) */
.header-teks {
    color: blue;
}

/* Aturan 3: ID Selector (Skor: 100) */
#judul-blog {
    color: green;
}

/* Aturan 4: Cascade (Urutan Penulisan) */
h1 {
    color: orange; /* Ini mengalahkan 'red' di atas, tapi kalah dari ID & Class */
}

/* Aturan 5: Inheritance */
body {
    font-family: Arial; /* H1 akan mewarisi font ini */
}

Sekarang text Selamat Datang di Blog Saya berwarna apa ?

4. Best Practice

Penting agar kodinganmu tidak menjadi berantakan:

• Hindari Penggunaan !important: Gunakan ini hanya sebagai jalan terakhir (emergency). Jika kamu terlalu sering memakai !important, CSS-mu akan sangat sulit diubah nantinya karena semua aturan "dipaksa" menang.
• Jaga Spesifisitas Tetap Rendah: Sebaiknya gunakan class untuk hampir semua hal. Jika kamu terlalu banyak menggunakan ID untuk styling, kamu akan kesulitan menimpa gaya tersebut jika dibutuhkan di bagian lain.
• Pahami Urutan: Biasakan menulis CSS secara teratur. Misalnya: Reset global di atas, lalu komponen umum, baru kemudian komponen spesifik di bawah.