CSS inherit and initial

Every CSS property accepts a few special keywords that explain where its value comes from.

inherit: take it from the parent

inherit makes an element use its parent’s computed value for that property, even for properties that are not inherited by default.

1
2
3
4
5
6
7
8
9

<style>
  .box { border: 3px dashed #d94a00; padding: 10px; color: #1a5276; }
  .box a { color: inherit; }
  .box p { border: inherit; margin: 8px 0 0; }
</style>
<div class="box">
  A <a href="#">link</a> that takes the parent's text color, instead of the browser's blue.
  <p>A paragraph that borrows the parent's border.</p>
</div>

Practical uses:

• a { color: inherit; } makes links follow the surrounding text color.
• button, input { font: inherit; } makes controls match the page font.
• border-radius: inherit on an overlay so it matches its parent’s corners.

initial: the browser’s default for that property

initial resets a property to its specification default, which is not necessarily what the browser’s own stylesheet uses.

1
2
3
4
5
6
7
8

<style>
  .box { color: #d94a00; font-size: 20px; }
  .box .reset { color: initial; font-size: initial; }
</style>
<div class="box">
  Orange 20px text.
  <span class="reset">This span is reset: black and medium (16px).</span>
</div>

For color, the initial value is the browser’s default text color (usually black). For display, it is inline, so display: initial on a div turns it inline, which surprises people.

Which should I use?

• Want it to match the parent: inherit.
• Want to cancel a rule you set earlier and go back to the default: initial, though unset and revert are often safer. See unset and revert.