Inheritance

Styles that flow downhill

Remember the selectors exercise, where nested list items turned bold even though the selector only matched the outer ones? That was inheritance: some CSS properties are passed from an element to everything inside it.

<style>
  article {
    color: darkslategray;
    font-family: Georgia, serif;
    border: 2px solid tomato;
  }
</style>
<article>
  <h2>A heading inside the article</h2>
  <p>A paragraph with a <a href="#">link</a> and some <strong>strong text</strong>.</p>
</article>

The heading and paragraph take the article's text colour and font, but they do not each get a red border. The border stays on the article alone.

Which properties inherit

The rule of thumb: properties about text inherit; properties about the box do not.

It makes sense when you picture the alternative. If border were inherited, putting a border on a page section would draw a box around every paragraph, link and word inside it.

Why links did not change colour

In the example, the link stayed blue. Browsers have their own built-in rule for links, something like a { color: blue; }. That rule targets the link directly, and any rule that targets an element directly beats a value the element would inherit.

This is an important point: inheritance is the weakest source of a value. It is only used when nothing targets the element itself. Specificity does not help a parent's rule here.

<style>
  #main { color: navy; }   /* very specific, but only for #main itself */
  p { color: grey; }       /* weak selector, but targets the p directly */
</style>
<div id="main">
  Text directly in the div is navy.
  <p>This paragraph is grey.</p>
</div>

To make links follow the surrounding text colour, tell them to inherit:

a { color: inherit; }

Use inheritance on purpose

Inheritance lets you set your main text styles once, on body, and have the whole page follow:

body {
  font-family: system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #222;
}

Every paragraph, list and table now has the same base font and colour without a rule of its own. You then only write rules for the exceptions: headings in another font, a muted colour for captions, and so on. Stylesheets built this way are shorter and much easier to change.

Form controls are a famous exception: browsers give input, button, select and textarea their own fonts. Many stylesheets start with this line so forms match the rest of the page:

button, input, select, textarea { font: inherit; }

inherit, initial and unset

Every property accepts three special keywords:

• inherit: take the parent's value, even for properties that normally do not inherit (border: inherit copies the parent's border).
• initial: use the property's original default from the CSS specification (for color that is usually black, not your body colour).
• unset: behave as inherit for inherited properties and initial for the others; a handy "forget any rule I set here".

Common mistakes

• Expecting a parent's rule to beat a direct rule because the parent's selector is more specific.
• Repeating font-family on every element instead of setting it once on body.
• Surprise inheritance: making a card's text white for a dark background, then wondering why a light-coloured child box has invisible text.
• Forms with a different font, fixed with font: inherit.

Exercise

Write one body rule that gives the whole page a font family, a line height of 1.6 and a dark grey colour. Then add exactly two more rules: links inherit the text colour but stay underlined, and headings use a different font family. Test it on a page with a heading, two paragraphs, a link and a button.

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #333;
}

a { color: inherit; text-decoration: underline; }

h1, h2, h3 { font-family: Georgia, serif; }

button { font: inherit; } /* optional: buttons match the page font */