When several rules could style an element, two mechanisms decide the result: the cascade (which rule wins) and inheritance (which properties pass down from parents).
The browser picks the winning declaration by checking, in priority order:
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) */
Certain properties (mostly text-related) are inherited by descendants automatically; most are not.
body {
color: #333; /* ✅ inherited — all text descendants get it */
font-family: serif; /* ✅ inherited */
border: 1px solid; /* ❌ NOT inherited — children don't get a border */
}
Inherited by default: color, font-*, line-height, text-align, visibility, cursor. Not inherited: 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 */
}
This is why a low-specificity rule can lose even if it's written later — specificity is checked before source order. Understanding the order (importance → specificity → source order) explains nearly every "my style isn't applying" case.
The cascade and inheritance are the core model of how CSS actually resolves.
Knowing the precedence order debugs conflicts, knowing which properties inherit lets you set color/font once on body instead of everywhere, and inherit/initial/unset give you precise control — together they're what make CSS predictable rather than magic.