4.5 CSS Inheritance

Using the HTML hierarchy

Let’s say we want to change the text color of a webpage. It would be tedious to specify a color for every HTML element:

p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6{ color: grey;}

Value propagation

The color value can be inherited from an ancestor. Considering we want to alter the whole webpage, we will choose the ancestor of all HTML elements, the body tag:

body{ color: grey;}

All child and descendant elements will inherit the value grey from their common ancestor body, which naturally encompasses all elements.

We could also use the html tag.

Inherited properties

Only a few CSS properties can be inherited from ancestors. They are mainly text properties:

  • text color
  • font (family, size, style, weight)
  • line-height

Some HTML elements don’t inherit from their ancestors. Links for example don’t inherit the color property.

Back to top

MarkSheet Video tutorials are coming!

Sign up for the MarkSheet newsletter to get notified!

Close