How does the CSS cascade and inheritance determine which styles apply?
Understand how the CSS cascade and inheritance decide which styles apply, using origin, importance, specificity, source order, and inherited properties.
Expected Interview Answer
The cascade resolves conflicts when multiple rules target the same element by weighing origin and importance, then specificity, then source order; inheritance lets certain properties pass from a parent element to its descendants when no rule sets them directly.
When two declarations conflict, the browser first ranks them by origin and importance (author !important beats author normal beats user-agent styles), then by selector specificity (inline > ID > class/attribute/pseudo-class > element), and finally by which rule appears last in the source. Inheritance is separate: properties like color and font-family flow down the DOM tree automatically, while properties like margin and border do not, though any property can be forced to inherit with the inherit keyword.
- Predictable, deterministic conflict resolution
- Less repetitive code because inherited properties set once flow down
- Fine-grained control through specificity and layering
- Explains why a style is or is not applied
- Enables consistent theming from a root element
AI Mentor Explanation
Think of multiple umpires and the DRS all giving verdicts on one delivery: the on-field umpire, the third umpire, and the rulebook each carry different authority, and the final decision follows a strict order of precedence. The cascade works the same way, ranking style rules by origin, importance, specificity, and order. Team conventions passed down from captain to every fielder are like inheritance, where players adopt shared instructions unless told otherwise.
Step-by-Step Explanation
Step 1
Group by origin and importance
Sort declarations into user-agent, user, and author layers, with !important flipping the normal ordering for stronger authority.
Step 2
Compare specificity
Within the winning origin, score each selector: inline styles, then IDs, then classes/attributes/pseudo-classes, then element/pseudo-elements.
Step 3
Fall back to source order
If specificity ties, the declaration appearing later in the stylesheet (or later-loaded sheet) wins.
Step 4
Apply inheritance for unset properties
For any property with no matching rule, inherit the parent value if the property is inheritable, else use the initial value.
Step 5
Resolve explicit keywords
Honor inherit, initial, unset, and revert to override the default inheritance behavior on specific properties.
What Interviewer Expects
- Correct ordering: origin/importance, then specificity, then source order
- Knowing specificity weights of inline, ID, class, and element selectors
- Distinguishing the cascade from inheritance
- Which properties inherit by default (color, font) versus which do not (margin, border)
- Awareness of inherit, initial, unset, and revert keywords
Common Mistakes
- Thinking source order beats specificity
- Believing all properties inherit by default
- Confusing the cascade with inheritance
- Assuming !important always wins regardless of origin
- Miscounting specificity by treating IDs and classes as equal
Best Answer (HR Friendly)
“When several style rules target the same element, CSS follows a clear priority order to pick a winner, considering where the rule came from, how specific it is, and which came last. Inheritance is a separate idea where some properties, like text color and font, automatically pass from a parent element down to its children.”
Code Example
/* Element selector: specificity 0,0,1 */
p { color: gray; }
/* Class selector: specificity 0,1,0 — wins over the element rule */
.note { color: navy; }
/* ID selector: specificity 1,0,0 — wins over the class rule */
#lead { color: crimson; }
/* color inherits, so the span turns crimson without its own rule */
#lead span { font-weight: bold; }
/* Force inheritance of a normally non-inherited property */
.card { border: inherit; }Follow-up Questions
- How exactly is selector specificity calculated?
- Which CSS properties are inherited by default?
- What do the inherit, initial, unset, and revert keywords do?
- How does !important interact with the cascade origins?
- How do CSS cascade layers (@layer) change the ordering?
MCQ Practice
1. When two rules have equal specificity, which one wins?
After origin/importance and specificity ties are broken, the cascade uses source order and the later declaration wins.
2. Which selector has the highest specificity?
An ID selector (1,0,0) outranks class, pseudo-class, and element selectors regardless of how many are chained.
3. Which property is inherited by default?
color is an inherited property, so children adopt it unless overridden; box properties like margin, border, and padding are not inherited.
Flash Cards
What order does the cascade use? — Origin and importance first, then specificity, then source order.
Specificity ranking? — Inline > ID > class/attribute/pseudo-class > element/pseudo-element.
Does margin inherit? — No. Box properties like margin, padding, and border are not inherited by default.
What does the inherit keyword do? — Forces a property to take its parent's computed value, even if it normally would not inherit.