Introduction to Inheritance in CSS

Elements inherit some CSS properties from their ancestors. You can check whether a property is inherited in the formal definition section on MDN, e.g. width and color.

1
2
3
4
5

<div class="grandparent">
  <div class="parent">
    <div class="child">I inherit the green color from my parent, and the italic style from my grandparent. I don't inherit the border.</div>
  </div>
</div>

1
2
3
4
5
6
7

.grandparent {
  font-style: italic;
  border: 2px solid black; /* not inherited */
}
.parent {
  color: green;  
}

CSS provides five universal property values to control inheritance.

• inherit
• initial
• revert
• revert-layer
• unset

The CSS shorthand property all applies one of these values to all properties of an element.