CSS Foundations
Cascade & Inheritance
Understand how the browser resolves competing declarations and which values pass from parent elements to their children. You will learn the exact order the browser follows, how inherited values fill unresolved properties, and how to trace a declaration without guessing.
The cascade is CSS’s conflict-resolution system. It decides which declaration supplies a value; inheritance runs afterward and lets selected computed values pass from a parent to its descendants.
Most difficult-looking CSS bugs begin with a simple question: where did this value come from? A property may have been declared directly, inherited from an ancestor, supplied by the user agent, or replaced by a rule in another layer. Reading those possibilities in the browser’s actual decision order turns an override problem into a short investigation. This topic also connects with CSS Specificity and Cascade Layers.
How a winning declaration is chosen
For each property on each element, the browser considers relevance, origin and importance, cascade layer, specificity, scoping proximity, and source order. The first difference settles the result. Specificity matters, but it is not the first step.
Example
css
p { color: slateblue; }
.article p { color: seagreen; }
/* The class selector makes this declaration win for paragraphs in .article. */Inheritance is a separate mechanism
If no declaration wins for a property, an element may inherit its parent’s computed value. Text properties such as color and font-family usually inherit. Box properties such as margin, padding, and border usually do not.
Example
css
body {
color: #243447;
font-family: system-ui, sans-serif;
}
button {
font: inherit;
color: inherit;
}Control keywords
inherittakes the parent’s computed value.initialuses the property’s specification-defined initial value.unsetbehaves likeinheritfor inherited properties andinitialfor the rest.revertrolls back to an earlier cascade origin.revert-layerrolls back within the current cascade layer.
Cascade Keywords
| Keyword | Purpose | Example |
|---|---|---|
| inherit | Uses the parent element's computed value. | color: inherit |
| initial | Uses the property's initial value. | display: initial |
| unset | Acts as inherit or initial according to the property. | margin: unset |
| revert | Rolls back to an earlier cascade origin. | font: revert |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cascade & Inheritance example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
p { color: slateblue; }
.article p { color: seagreen; }
/* The class selector makes this declaration win for paragraphs in .article. */
body {
color: #243447;
font-family: system-ui, sans-serif;
}
button {
font: inherit;
color: inherit;
}
</style>
</head>
<body>
<main class="article"><h1>Cascade demo</h1><p>This paragraph inherits its font and wins the more specific color rule.</p><button>Inherited button text</button></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Core cascade and inheritance | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- When a CSS rule appears to be ignored, the cause is usually the cascade-not a broken browser.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Trace the cascade first, then inheritance. That order explains most declarations that appear to be ignored.
When debugging, inspect the computed property and work backward to its winning declaration. If no declaration supplied the value, check whether the property inherits and which ancestor established it. This method is faster and safer than adding a stronger selector until the page happens to look right.