HTML and CSS Cascade & Inheritance
HTML & CSS: Cascade & Inheritance
When several rules target the same element, the CSS cascade decides which one applies.
Inheritance flows styles down the DOM tree.
Understanding both keeps your styles predictable.
The cascade
The cascade evaluates styles in three stages:
- Importance: origin (browser, user, author) and
!important. - Specificity: selector weight.
- Source order: later rules win when specificity ties.
Note: Think of this as a contest: first the browser checks how important the rule is, then how specific the selector is, and finally which rule appears last.
If you want to read more or get an in-depth understanding, see How To Add CSS and Specificity in the CSS tutorial.
Inheritance
Some properties (color, font, line-height) automatically inherit from their parent elements.
Others (margin, padding, border) do not.
- Use
inheritto force inheritance. - Use
initialto reset to the default. - Use
revertto roll back to the user agent style.
Note: Inheritance saves time: children copy certain styles from their parent unless you override them.
If you want to read more about CSS Inheritance or get an in-depth understanding, go to CSS Inheritance in the CSS tutorial.
Specificity refresher
Specificity is counted as (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements).
Higher numbers win.
Note: You can read scores like (0,1,0,0).
The first number is inline styles, the second is IDs, the third is classes, and the last is element names.
Specificity table
/* Score: (0,1,0,0) */
#hero { background:#0ea5e9; }
/* Score: (0,0,2,0) */
.card.highlight { background:#f0f9ff; }
/* Score: (0,0,1,1) */
section.card { background:#fff; }
The ID selector's specificity score (0,1,0,0) beats class combinations (0,0,2,0) and element+class (0,0,1,1), so the #hero rule applies.
Source order demo
If specificity is equal, the browser uses the last declaration.
The !important flag
- Overrides normal cascade, but should be rare.
- Use it to break out of third-party styles or debug, then remove.
- Try refactoring selectors or ordering rules instead.
Debugging conflicts
- Open DevTools ➜ Elements ➜ Styles to view applied rules and their origins.
- Toggle rules on/off to check cascade effects.
- Consider using CSS layers (
@layer) in large codebases to control priority.
If you want to read more or get an in-depth understanding, see Specificity and Browser Support in the CSS tutorial.
Cascade demo: last rule wins
This demo combines semantic HTML with layered CSS rules to show how the cascade resolves conflicts.
Syntax highlights: custom properties for a brand color, plus two matching selectors where the later rule overrides the earlier one.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<article class="card feature">
<h2>Cascade in action</h2>
<p>The dashed border appears because the last matching rule wins.</p>
</article>
</body>
</html>
:root {
--brand:#6366f1;
}
body {
font-family:"Inter",sans-serif;
background:#f6f8ff;
}
.card {
padding:24px;
border-radius:14px;
border:3px solid #cbd5f5;
}
.card.feature {
border-color:var(--brand);
}
.card.feature {
border:3px dashed #f97316; /* Last rule wins */
}
The dashed orange border appears because the final matching rule wins when specificity ties, even if earlier rules set colors or variables.
