Inherit

The inherit value sets a property value to match its parent's value.

Remember that some properties are inherited (e.g. color) and the others not inherited (e.g. border). Even without you specifying inherit, by default CSS always inherits inherited property values to children elements.

<div id="inherit-example">
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p class="inherit">Follows the parent's color</p>
  <p class="initial">Back to browser's default</p>
</div>

<div id="inherit-example">
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <p class="inherit">Follows the parent's color</p>
  <p class="initial">Back to browser's default</p>
</div>

#inherit-example {
  color: blue;
}
#inherit-example p {
  color: red;
}
#inherit-example .inherit {
  color: inherit;
}
#inherit-example .initial {
  color: initial;
}

#inherit-example {
  color: blue;
}
#inherit-example p {
  color: red;
}
#inherit-example .inherit {
  color: inherit;
}
#inherit-example .initial {
  color: initial;
}

| LIVE PREVIEW

Lorem ipsum dolor sit amet

Follows the parent's color

Back to browser's default

References

inherit (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance#non-inherited_properties