Inheritance – CSS

Demo

Summary

In CSS, certain styles that are applied to a parent element can be inherited by its children. This concept is called inheritance.

Details

In CSS, when certain styles are applied to a parent element, the child elements can inherit the styles. This concept is called inheritance.

Let’s say you have the following elements in your HTML file:

<div class="my-class">
  <h1>Group</h1>
  <p>The heading element and this paragraph will share similar styles.</p>
</div>

Let’s say you also have the following CSS code:

.my-class {
  color: red;
}

Even though the style is applied to the div element through a class, the color value is applied to both the h1 and the p elements.

Not all properties can be inherited. For example, the margin and padding properties are not inherited. If they were used in the .my-class rule from above, they would only apply to the div element.

Exercises

First, recreate the CSS code in the embedded CodePen demo. Then try customizing the final color value.

References

Inheritance on MDN

Back to: CSS Reference > CSS Concepts