Inheritance
CSS inheritance describes how certain property values applied to a parent element are automatically passed down to its descendant elements.
/* Child elements inherit certain properties from their parent */This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
CSS inheritance describes how certain property values applied to a parent element are automatically passed down to its descendant elements.
CSS inheritance is a fundamental concept where certain CSS property values set on a parent element are automatically applied to its child elements, unless explicitly overridden. This mechanism simplifies styling by allowing developers to define common styles once at a higher level in the DOM tree, rather than repeating them for every individual element. Properties related to text, such as `color`, `font-family`, `font-size`, `line-height`, `text-align`, and `letter-spacing`, are typically inherited. This makes sense, as you usually want all text within a section to share a consistent look. However, not all properties are inherited. Properties related to the box model (like `margin`, `padding`, `border`, `width`, `height`), positioning (`position`, `top`, `left`), and display (`display`, `float`) are generally *not* inherited, as inheriting these would lead to unpredictable layouts. Developers can explicitly control inheritance using special keywords: `inherit` (forces a property to take its parent's computed value), `initial` (resets a property to its browser default value), `unset` (resets to `inherit` if naturally inherited, otherwise to `initial`), and `revert` (resets to the value established by the user-agent stylesheet or user stylesheet). Understanding which properties inherit and how to control inheritance is crucial for writing efficient, predictable, and maintainable CSS, reducing redundancy and making global style changes easier.
Quick reference
Syntax
/* Child elements inherit certain properties from their parent */See it in practice
Examples
Inheritance of text color and font-family
<style>
.parent {
color: blue;
font-family: 'Arial', sans-serif;
}
</style>
<div class="parent">
<p>This text is blue and Arial.</p>
<span>This text is also blue and Arial.</span>
</div>Both the paragraph and span text inside the parent div will be blue and use Arial font.
The `color` and `font-family` properties are inherited, so the child `<p>` and `<span>` elements automatically adopt the styles defined on their parent `<div>`.
Non-inherited properties (e.g., border)
<style>
.parent {
border: 2px solid red;
padding: 10px;
}
</style>
<div class="parent">
<p>This paragraph has no border or padding from its parent.</p>
</div>The parent div will have a red border and padding. The child paragraph will not inherit these styles.
Properties like `border` and `padding` are not inherited. Each element must define its own box model properties.
Forcing inheritance with `inherit` keyword
<style>
.parent {
border: 2px solid blue;
}
.child {
border: inherit;
padding: 5px;
}
</style>
<div class="parent">
<div class="child">This child inherits the blue border.</div>
</div>Both the parent and child divs will have a 2px solid blue border.
Even though `border` is not naturally inherited, the `inherit` keyword explicitly tells the child element to take its parent's computed value for that property.
Debug faster
Common Errors
Unexpected Non-Inheritance
Cause: Expecting a property to be inherited when it isn't (e.g., `margin`, `padding`, `background-color`).
Fix: Remember that only a subset of CSS properties are inherited by default. For non-inherited properties, you must explicitly apply the style to the child element or use the `inherit` keyword if you want it to match the parent.
div { background-color: red; }
<div><p>This paragraph's background is NOT red by default.</p></div>Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
CSS inheritance describes how certain property values applied to a parent element are automatically passed down to its descendant elements.
Unexpected Non-Inheritance: Remember that only a subset of CSS properties are inherited by default. For non-inherited properties, you must explicitly apply the style to the child element or use the `inherit` keyword if you want it to match the parent.