Wakati sheria kadhaa zinaweza kulinganisha kitu, mitazamo miwili huamua matokeo: kaskadi (sheria ipi inashinda) na urithi (mali gani inapitia kwa watoto kutoka kwa wazazi).
Mbrowser huchagua tangazo la ushindi kwa kuangalia, kwa mpangilio wa kipaumbele:
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) */
Mali zingine (zaidi ya zinazohusiana na maandishi) zinarihebishwa kiotomatiki na wazazi; zaidi hazina.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Inarithi kwa kawaida: color, font-*, line-height, text-align, visibility, cursor. Hairithi: 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 */
}
Ndio sababu sheria yenye mahususi mabaya inaweza kupoteza hata kama imeandikwa baadaye — mahususi yanachunguzwa kabla utaratibu wa chanzo. Kuelewa utaratibu (umuhimu → mahususi → utaratibu wa chanzo) unasaidia karibu kila kesi ya "mitindo yangu haitatumiki".
Kaskadi na urithi ni kielelezo cha msingi cha jinsi CSS inakamatiana kwa kweli.
Kujua mpangilio wa kipaumbele kubugi mgogoro, kujua mali gani zinarihebishwa hukuruhusu kuweka color/font mara moja kwa body badala ya mahali yote, na inherit/initial/unset hukupa udhibiti sahihi — pamoja ni kile kinachofanya CSS kukamatia badala ya isimu.