The CSS cascade decides which style declaration wins when several styles overlap. Think of styles as taking different routes toward an element: browser defaults, user preferences, and your own styles all meet, and the browser resolves the conflict. section 1.4 section 19.26
Follow the cascade in two small steps:
- Compare the style sources. In ascending order of weight, they are browser default styles, user custom styles, external style sheets, internal style sheets, and inline styles. Declarations closer to the element generally carry more weight. section 19.26 section 19.30
- If competing declarations come from the same source, compare selector specificity: elements and pseudo-elements, classes and pseudo-classes, IDs, inline styles, and finally the !important keyword. section 19.30
A tiny color clash
An internal rule sets div text to red, while the element itself has an inline style setting its text to blue. The inline declaration wins because it comes from the higher-weight source, so the text appears blue. section 19.26
<style> #1
div { #1
color: red; #1
} #1
</style> #1
<div style="color: blue;"> #2
What is the color of this text?
</div>
Inspect the competing declarations and predict the rendered color before checking the cascade’s result. section 19.26
Inheritance explains what styles are passed from parents to descendants; the cascade explains how overlapping declarations are prioritized. Together, they help make CSS conflicts feel less mysterious. section 19.26 section 19.30
