CSS · Chapter 32 of 44
CSS Inheritance and the Cascade
Some CSS properties, like color and font-family, are inherited by default from parent to child elements, while others, like margin and border, are not.
The 'cascade' in Cascading Style Sheets refers to how the browser resolves conflicting rules using source order, specificity, and importance.
Syntax
property: inherit;Inherited vs non-inherited properties
Text-related properties (color, font-family, line-height) typically inherit. Box-model properties (margin, padding, border, width) do not, by design.
The cascade algorithm
When multiple rules apply, the browser considers importance (!important), specificity, and then source order to decide the winning declaration.
Example 1 (css)
body {
color: darkgreen;
}
p {
/* inherits darkgreen automatically */
}Output
Paragraph text appears dark green, inherited from the bodycolor is an inherited property, so child elements pick it up automatically unless overridden.
Key points
- Some properties like color and font-family inherit by default.
- Box-model properties like margin and border do not inherit.
- The keyword inherit forces a property to take its parent's value.
- The cascade resolves conflicts via importance, specificity, and order.
💡 Note: Use inherit explicitly when you want a normally non-inheriting property to match its parent.