Inheritance
Some CSS properties are inherited — child elements automatically get the same value as their parent. Others are not.
Demo: Inheritance Example
HTML
<div class="parent">
<p>Child paragraph inherits color</p>
<p>Another child <span>span inside</span></p>
</div> CSS
.parent {
color: #6366f1;
font-family: Georgia, serif;
border: 2px solid #cbd5e1;
padding: 16px;
}
p { margin: 8px 0; }Live Output Window
The color and font-family are inherited. The border and padding are not.
Inherited vs Non-inherited
| Inherited | Not Inherited |
|---|---|
color | border |
font-* | margin |
text-* | padding |
line-height | background |
visibility | width / height |
cursor | display |
Controlling Inheritance
Use special keyword values to override inheritance behavior:
Demo: Inherit, Initial, Unset
HTML
<div class="card">
<p>Normal inherited color</p>
<p class="inherit-border">Inherit border</p>
<p class="initial-color">Initial color</p>
</div> CSS
.card {
color: #059669;
border: 2px solid #6366f1;
padding: 12px;
}
.card p { margin: 8px 0; }
.inherit-border { border: inherit; }
.initial-color { color: initial; }Live Output Window