The CSS cascade resolves competing style rules and decides which style reaches an element. Think of styles taking different routes downhill: browser defaults, user preferences, and your styles can all arrive at once. When they overlap, the browser chooses one according to its rules. section 1.2
Inheritance describes what happens when styles pass from parent elements to descendants; the cascade describes how those styles are propagated and prioritized. Together with specificity, it keeps a tangled collection of rules from becoming total CSS mayhem. section 19.13 section 19.11
The cascade compares style sources in ascending order of importance:
- Browser default styles, called the user agent style sheet. section 19.13
- Custom styles supplied by the browser user, called the user style sheet. section 19.13
- External and internal author style sheets. section 19.13
- Inline styles, which outrank the other listed sources. section 19.13
When red meets blue
An internal style sheet sets a div's text to red, while an inline style sets it to blue. The inline declaration wins because its source has greater weight, so the text appears blue. If competing declarations come from the same source, specificity lets the more specific selector win. section 19.13 section 19.15
<style> #1
div { #1
color: red; #1
} #1
</style> #1
<div style="color: blue;"> #2
What is the color of this text?
</div>
Use the compact listing to inspect a direct conflict between an internal div rule and an inline color declaration. section 19.13
