CSS Tutorial
CSS Inheritance
Inheritance is the mechanism by which some CSS properties automatically pass from a parent element down to its children. Understanding what inherits, what does not, and how to force or block inheritance is fundamental to writing predictable stylesheets. This guide explains the rules and the inherit, initial, unset, and revert keywords.
What is Inheritance?
When you set certain properties on a parent element, its descendants receive those values automatically unless something overrides them. For example, set color and font-family on the body and every paragraph, heading, and span inside it picks them up. This saves you from repeating typography rules on every element.
<!DOCTYPE html>
<html>
<head>
<style>
.parent { color: #0f766e; font-family: Georgia, serif; font-style: italic; }
</style>
</head>
<body>
<div class="parent">
<p>This paragraph inherits color, font, and italic.</p>
<ul><li>So does this list item.</li></ul>
</div>
</body>
</html>Which Properties Inherit?
Not everything inherits. As a rule of thumb, text-related properties inherit while box-model and layout properties do not. This default is deliberate: it would be chaos if margins or borders cascaded into every child.
| Usually inherited | Usually NOT inherited |
|---|---|
| color | margin / padding |
| font-family, font-size, font-weight | border |
| line-height, letter-spacing | width / height |
| text-align, text-indent | background |
| visibility, list-style | display, position |
| cursor | float, overflow |
A quick way to remember it: properties that describe text tend to inherit; properties that describe the box or its position do not. When unsure, check MDN - each property page states whether it is inherited.
The inherit Keyword
You can force any property to inherit its parent's computed value with the inherit keyword. This is useful for properties that do not inherit by default, such as making a link adopt the surrounding text color or a button borrow its parent's background.
<!DOCTYPE html>
<html>
<head>
<style>
.note { color: #b91c1c; border: 2px solid; padding: 12px; }
.note a { color: inherit; } /* link takes the red color instead of blue */
</style>
</head>
<body>
<p class="note">This box is red. <a href="#">This link inherits the red color.</a></p>
</body>
</html>initial, unset, and revert
CSS provides four global keywords that give you fine control over inheritance and defaults. They can be assigned to any property.
| Keyword | Effect |
|---|---|
| inherit | Take the parent's computed value |
| initial | Reset to the property's CSS-spec default value |
| unset | Act like inherit if the property normally inherits, otherwise like initial |
| revert | Roll back to the browser's default stylesheet value |
Live Example: Comparing the Keywords
This example shows color behaving differently under each keyword. The parent is green; each child chooses how to treat that inherited color.
<!DOCTYPE html>
<html>
<head>
<style>
.box { color: #16a34a; font-family: system-ui, sans-serif; padding: 8px; }
.box .a { color: inherit; } /* green (parent) */
.box .b { color: initial; } /* black (spec default) */
.box .c { color: unset; } /* green - color inherits by default */
</style>
</head>
<body>
<div class="box">
<p class="a">inherit → green</p>
<p class="b">initial → black</p>
<p class="c">unset → green</p>
</div>
</body>
</html>Inherited values pass down the computed value, not your original declaration. If a parent's font-size is set in em, children inherit the resolved pixel value, not the em expression - so it will not compound a second time.
Key points
- Inheritance passes certain parent property values down to descendants automatically.
- Text-related properties (color, font, line-height) inherit; box properties (margin, border, width) do not.
- Use the inherit keyword to force inheritance on a non-inheriting property.
- initial resets to the spec default, revert to the browser default, unset picks whichever fits.
- Children inherit the computed value, so relative units do not re-compound.