CSS Inheritance

When you set color on a parent, its children get that color without a rule of their own. That is inheritance.

1
2
3
4
5
6
7

<style>
  .card { color: #1a5276; font-family: Georgia, serif; border: 2px solid #d94a00; padding: 10px; }
</style>
<div class="card">
  <h3>The Slow Garden</h3>
  <p>The text, the heading and even this paragraph are blue Georgia. But only the card has a border.</p>
</div>

The color and font went down to the children. The border and the padding did not.

Why some do and some do not

• Properties about text are mostly inherited, since you want a whole paragraph to look consistent.
• Properties about boxes are not, since a border on a container should not repeat on every child.

What this means in practice

• Set your base typography once on body and everything follows.
• Set a text color on a dark section and every heading and paragraph inside turns light.
• A box property such as background needs its own rule, or transparent backgrounds let the parent show through.

Some elements break the chain

Form controls (input, button, textarea, select) have their own default font and do not inherit it. Links have their own color from the browser. You fix that with font: inherit and color: inherit. See Form Styling Basics.

Next: inherit, initial, unset and revert let you control this explicitly.