CSS Inheritance
Inheritance is the way certain CSS properties set on a parent element automatically pass down to its children.
Some properties are inherited by default and some are not. Understanding which is which explains why setting color on the body affects every paragraph, yet setting a border on the body does not appear around each child.
What Inherits and What Does Not
As a rule of thumb, text-related properties inherit and box-related properties do not. This keeps typography consistent while stopping spacing and borders from cascading everywhere.
Set typography once on the body
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #333;
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Paragraphs and list items inherit all three */
</style>
</head>
<body>
<p>This paragraph inherits color, font, and line-height from the body.</p>
<ul>
<li>List items inherit them too</li>
</ul>
</body>
</html>Controlling Inheritance
- inherit takes the computed value from the parent
- initial resets the property to its default value
- unset behaves as inherit for inherited properties and initial for the rest
Force a non-inherited property to inherit
<!DOCTYPE html>
<html>
<head>
<style>
.panel {
border: 2px solid #00643c;
}
.panel .child {
border: inherit; /* copy the parent's border */
}
</style>
</head>
<body>
<div class="panel">
<div class="child">Child inherits the border</div>
</div>
</body>
</html>Note: Form controls like input and button do not inherit font properties by default. Add font: inherit to make them match the surrounding text.
Note: Inheritance is separate from the cascade. Inheritance passes values down the document tree, while the cascade decides which rule wins when several target the same element. See CSS Specificity.
Exercise: CSS Inheritance
Which statement about CSS property inheritance is accurate?
