What You'll Learn
What CSS inheritance is and why it matters
Which properties inherit by default and which don't
How to control inheritance with special keywords
The difference between inherit, initial, unset, and revert
Practical applications of inheritance in real-world CSS
Introduction to Inheritance
Inheritance is one of CSS's most powerful features. It's the mechanism by which certain
CSS properties flow from parent elements down to their children and descendants. This
creates a cascade of styles that makes writing CSS more efficient and maintainable.
Understanding inheritance helps you write less CSS and avoid repetition. Instead of
styling every element individually, you can set properties on parent elements and let
children inherit them automatically.
Why Inheritance Matters
Inheritance is why we typically set font properties on the body element—they
automatically cascade down to all text elements in the document!
Inherited Properties
Certain CSS properties are inherited by default . These are primarily
text-related properties that make sense to pass down from parent to child.
Common Inherited Properties
Text: color, font-family, font-size, font-style, font-weight, letter-spacing, line-height, text-align, text-indent, text-transform, white-space, word-spacingLists: list-style, list-style-type, list-style-position, list-style-imageOther: cursor, visibility, quotes
Live Example
In this demo, the parent container sets text properties that automatically flow down
to all children and descendants:
.parent-container {
color: #0066cc;
font-family: Georgia, serif;
font-size: 1.125rem;
line-height: 1.8;
}
/* Children automatically inherit these properties! */
Notice how the nested paragraph and span elements inherit all the text properties
from their parent, even though we didn't explicitly style them.
Non-Inherited Properties
Not all properties inherit. Properties that don't make logical sense to pass down
to children—like box model properties—don't inherit by default.
Properties That Don't Inherit
Box Model: margin, padding, border, width, heightBackground: background, background-color, background-imagePosition: position, top, right, bottom, left, z-indexLayout: display, float, clear, overflow
Why Some Properties Don't Inherit
Imagine if border inherited—every nested element would get a border,
creating visual chaos! Non-inherited properties need to be set explicitly on each
element that needs them.
.parent-container {
border: 4px solid #dc3545;
padding: 1.5rem;
background-color: #f8d7da;
}
/* Children do NOT inherit border, padding, or background */
Design Principle
CSS inheritance is designed to be predictable. Text properties that affect readability
inherit, while layout and box properties that affect structure don't.
The 'inherit' Keyword
You can force any property to inherit from its parent using the inherit
keyword, even properties that don't normally inherit.
Syntax
.parent {
background-color: lightblue;
border: 3px solid #0066cc;
}
.child {
background-color: inherit; /* Now inherits parent's background */
border: inherit; /* Now inherits parent's border */
}
Use Cases
The inherit keyword is useful when you want children to explicitly match
their parent's styling for properties that don't normally inherit.
Practical Application
Use inherit to create themed components where children automatically
match their parent's background or border styles.
The 'initial' Keyword
The initial keyword resets a property to its CSS specification default
value, ignoring any inherited or previously set values.
How It Works
initial sets the property to the value defined in the CSS specification,
not the browser's default stylesheet. For most properties, this means removing any
styling.
.parent {
color: red;
font-size: 1.25rem;
}
.child {
color: initial; /* Resets to CSS default (usually black) */
font-size: initial; /* Resets to CSS default (medium) */
}
initial vs Browser Defaults
initial uses the CSS spec default, not the browser's user agent stylesheet.
For example, display: initial sets display: inline, not the
element's typical default like block for a <div>.
The 'unset' Keyword
The unset keyword is a smart keyword that acts like inherit
for inheritable properties and initial for non-inheritable properties.
Dual Behavior
unset asks: "Is this property inheritable?" If yes, it inherits from the
parent. If no, it resets to initial.
.parent {
color: purple;
border: 3px solid purple;
}
.child {
color: unset; /* Inherits purple (color is inheritable) */
border: unset; /* Resets to none (border is not inheritable) */
}
When to Use unset
Use unset when you want to remove all custom styling but preserve
natural inheritance. It's especially useful with the all property:
all: unset.
The 'revert' Keyword
The revert keyword rolls back to the browser's default stylesheet
(user agent styles), ignoring your custom CSS but preserving browser defaults.
How revert Differs
initial uses CSS spec defaultsrevert uses browser stylesheet defaultsinherit uses parent's value
h2 {
font-size: 0.875rem; /* Custom override */
margin: 0.25rem 0;
}
h2.reset {
font-size: revert; /* Back to browser default (~1.5em) */
margin: revert; /* Back to browser default */
}
Browser Support
The revert keyword has excellent modern browser support. There's also
revert-layer for reverting to previous cascade layers, which is useful
in advanced CSS architectures.
Inheritance Quick Reference
Here's a summary of all the inheritance control keywords:
Keyword Comparison
/* Four ways to control inheritance */
.element {
color: inherit; /* Use parent's value */
}
.element {
color: initial; /* Use CSS specification default */
}
.element {
color: unset; /* inherit if inheritable, else initial */
}
.element {
color: revert; /* Use browser default stylesheet value */
}
Decision Guide
Want parent's value? Use inherit
Want to remove all styling? Use initial
Want natural behavior? Use unset
Want browser defaults? Use revert
Practical Applications
Let's look at some real-world scenarios where understanding inheritance helps you
write better CSS.
Setting Global Typography
/* Set once on body, inherits everywhere */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
Resetting Form Elements
/* Form elements don't inherit font properties by default */
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
Theme Components
/* Parent sets theme, children inherit */
.card {
color: #333;
background: white;
border: 1px solid #ddd;
}
.card.dark-theme {
color: #f0f0f0;
background: #1a1a1a;
border-color: #333;
}
/* Children automatically adapt to theme */
.card p {
color: inherit; /* Matches theme color */
}
Best Practice
Leverage inheritance to reduce repetition. Set common properties on parent elements
and let children inherit them. This makes your CSS more maintainable and easier to
theme.
Key Takeaways
Inheritance automatically passes certain CSS properties from parent to child elementsText properties (color, font-family, font-size, etc.) inherit by defaultBox model and layout properties (margin, padding, border, display) don't inheritUse inherit
Use initial
Use unset
Use revert
Leverage inheritance to write less CSS and create more maintainable stylesheets