Nalika sawetara aturan bisa nggayani elemen, rong mekanisme mutusake asil: cascade (aturan apa sing menang) lan warisan (properti apa sing diturunake saka induk).
Pelangi milih deklarasi sing menang kanthi ngetung, miturut urutan kaanan:
1. Importance → !important beats normal declarations
2. Specificity → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
p { color: blue; } /* specificity 0,0,1 */
.text { color: green; } /* specificity 0,1,0 → wins over the element rule */
p { color: red; } /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
Propertyti tartamtu (biasane gaya teks) warisane turun-tumurun kanthi otomatis; akeh sing ora.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Warisane gumlinang: color, font-*, line-height, text-align, visibility, cursor. Ora warisane: border, margin, padding, background, width, height, display.
.child {
color: inherit; /* force-take the parent's value */
border: initial; /* reset to the property's default */
all: unset; /* reset everything: inherit if inheritable, else initial */
}
Iki butuh aturan spesifisitas murah bisa kalah sanajan ditulis luwih tukaran — spesifisitas dicek sadurung sumber urutan. Mangerteni urutan (kaanan → spesifisitas → sumber urutan) nerangake meh saben kasus "gaya aku ora ditrapake".
Cascade lan warisan minangka model inti saka carane CSS bener ngatasi.
Nganggo urutan kahanan debug konflik, ngerti properti apa sing warisane ngidini sampeyan nyetel color/font sapisan ing body tinimbang ing sabar-sabar, lan inherit/initial/unset menehi sampeyan kontrol presisi — babarengan padha nggawe CSS bisa ditebak tinimbang magis.