Detailed explanation
The CSS cascade is the algorithm browsers use to choose a winning declaration when several declarations compete for the same property on an element. It works property by property, so one rule can supply colour while another supplies padding. Before comparing declarations, the browser checks relevance: selectors must match, and conditions such as media queries must apply. Understanding this process makes overrides predictable instead of encouraging repeated selector changes or unnecessary !important flags.
The first major comparison is origin and importance together—not two independent checks. From lowest to highest precedence, the categories are normal browser styles, normal user styles, normal author styles, CSS keyframe animations, important author styles, important user styles, important browser styles, and active CSS transitions. Author styles include your stylesheets and inline styles; user styles are user-supplied preferences or stylesheets. Therefore, !important is not an unconditional winner: user-important declarations outrank author-important declarations, and active transitions outrank both. Stylesheet location alone does not give external or internal CSS higher priority.
Within an origin, cascade layers also affect precedence before specificity. For normal declarations, later layers beat earlier layers, and unlayered styles beat layered styles. For important declarations, this layer order reverses, and layered important declarations beat unlayered important declarations. Inline author declarations have special precedence over stylesheet declarations of the same importance. After these distinctions, specificity compares matching selectors lexicographically: IDs first, then classes, attributes and pseudo-classes, then element names and pseudo-elements. Specificity is not a decimal score; many classes cannot outweigh one ID. The :where() pseudo-class contributes zero specificity.
If specificity ties, scoping proximity can decide between declarations associated with @scope: the closer scope root wins. Otherwise, the later declaration in order of appearance wins. In the example, red beats blue because the selectors tie and red appears later; green wins because its declaration is important. However, another important rule does not necessarily need greater specificity to beat green: origin, layer precedence or a later tied declaration may decide. Interviewers value this ordered reasoning more than memorising that the strongest selector always wins.
Key points to remember
- Check applicability first, including selector matches and media conditions.
- Compare origin and importance together; transitions have the highest cascade precedence.
- Resolve cascade-layer precedence before specificity; important declarations reverse layer order.
- Compare specificity by IDs, class-like selectors, then element-like selectors.
- After specificity, compare scoping proximity where applicable, then order of appearance.
Common mistakes candidates make
- Treating !important as unbeatable or as an increase in selector specificity.
- Comparing specificity before checking origins, importance and cascade layers.
- Assuming the last rule always wins, even when an earlier declaration has higher precedence.
Likely follow-up questions
Can a stylesheet rule override an inline style?
An author stylesheet declaration marked !important can override a normal inline declaration. An important inline declaration beats other author-important declarations, but user-important and browser-important declarations still outrank it.
How is inheritance different from the cascade?
The cascade resolves competing declarations for a property on an element. Inheritance supplies the parent's computed value for inherited properties when no declaration supplies a value, subject to CSS defaulting rules; a directly targeted normal declaration therefore beats an inherited value, even if the parent's declaration was important.
How would you debug an unexpected CSS override?
Inspect the element in browser developer tools and find the property in the Styles or Computed panel. Examine the winning and crossed-out declarations, checking applicability, origin and importance, layers, inline styles, specificity, scope and source order rather than immediately adding !important.
Interview tip: Walk through the colour example step by step, then qualify the simplified rule with origin, layer and transition exceptions.