CSS Automatic inheritance


Example

Inheritance the a fundamental mechanism of CSS by which the computed values of some properties of an element are applied to its' children. This is particularly useful when you want to set a global style to your elements rather than having to set said properties to each and every element in your markup.

Common properties that are automatically inherited are: font, color, text-align, line-height.

Assume the following stylesheet:

#myContainer {
  color: red;
  padding: 5px;
}

This will apply color: red not only to the <div> element but also to the <h3> and <p> elements. However, due to the nature of padding its value will not be inherited to those elements.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>