Learn CSS · Lesson 2 of 7 · 6 min

Inheritance: parents and children

Here is an idea that quietly saves you from repeating yourself on every line: some styles flow downward. Set the text color once on a parent, and every element nested inside it picks that color up for free. That downward flow is called inheritance, and it is one of the reasons a whole page can look consistent from just a few rules.

Your page is a tree of parents and children

Every HTML document is a tree. The <html> element contains <body>, the body contains your sections, a section contains paragraphs, a paragraph contains a link or some bold text. Each element sits inside another, so every element has a parent (the box wrapping it) and often has children (the boxes it wraps). The body is the parent of everything you can see.

Inheritance rides along that tree. When you set certain properties on a parent, the browser hands those same values down to the children, then to the children's children, all the way to the bottom. You did not write the rule on each one, yet they all received it. Think of it like a family trait passing from grandparent to parent to child without anyone filling out a form.

.parent color and font-family set here
.child no color set, inherits the parent's
.grandchild still no color set, inherits it too
inherited: color and font flow all the way down without being re-declared.

The text inside the child and grandchild above is the same color and the same typeface as the parent, yet only the parent carries those declarations. That is inheritance doing the work. Here is the rule behind the picture:

.parent {
  color: #6d5efc;          /* set once, on the parent */
  font-family: ui-monospace, monospace;
}
.child { /* nothing about color or font here */ }
.grandchild { /* also nothing, and yet... */ }
/* child and grandchild both render in that color and font */

What inherits, and what does not

Not every property flows down, and the split is surprisingly logical once you see it. Text-ish properties inherit. Box-ish properties do not. Anything about how words look tends to pass to children, because you almost always want a heading and its surrounding text to share a font. Anything about an element's box and layout stays put, because you almost never want a child to silently copy its parent's margin or border.

Inherits by default

  • color
  • font-family
  • font-size
  • line-height
  • text-align
  • visibility

The "how text looks" group.

Does not inherit

  • margin
  • padding
  • border
  • background
  • width
  • display

The "box and layout" group.

To prove the second column, put a border on a parent and watch the child stay borderless. The border belongs to the parent's box alone; it does not get copied inward.

.parent (has a border)
.child (no border of its own)
not inherited: the border stays on the parent, the child does not receive one.
.parent { border: 2px solid #6d5efc; }
.child  { /* no border declared, and none appears */ }
/* border is box-ish, so it stops at the element it is set on */

If you are ever unsure whether a property inherits, the mental shortcut is reliable: ask whether it describes the text or the box. Text flows down, the box does not. When you need the exact answer, your browser DevTools shows inherited values in the styles panel, usually under an "Inherited from" heading.

The four explicit keywords

Inheritance also has manual controls. Four keywords let you ask for a specific behaviour on any property, whether or not it inherits on its own.

  • inherit forces a property to take its parent's computed value, even properties that normally would not. Useful for making a button's text color match its surrounding paragraph, for example.
  • initial resets a property to the CSS specification's default value, ignoring both the parent and any rule you wrote. For color that default is black, not whatever the body uses.
  • unset is the smart one. It behaves like inherit for properties that normally inherit, and like initial for properties that do not. It is "do the natural thing".
  • revert rolls a property back to the value the browser's own default stylesheet would give it, undoing your author styles but keeping the browser's built-in look.
.link {
  color: inherit;     /* match the surrounding text color   */
}
.reset {
  color: initial;     /* back to the spec default (black)   */
  margin: unset;      /* margin does not inherit, so: initial */
}
.native {
  font-size: revert;  /* back to the browser's default size  */
}

You will reach for inherit most often, usually to make an element opt into a value it would otherwise miss. The other three are precision tools for undoing styles cleanly, which comes up when you build components that must not leak styling into or out of themselves.

Using inheritance on purpose

The practical payoff is this: set your base typography once, high up on the tree, and let it cascade to the whole document. The conventional home for that is the body element. From there, color and font reach every paragraph, list item and table cell underneath, so you write one rule instead of hundreds.

body {
  color: #1a1a22;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
/* every descendant now reads as that color, font and size,
   unless a more specific rule deliberately overrides it */

This is why a well-built stylesheet feels calm: the defaults live in one place, and individual elements only declare what makes them different. A heading might set a larger font-size and a bold font-weight, but it happily inherits the family and color from the body. You change the site's typeface by editing a single line, and the change ripples everywhere.

How this pairs with the cascade

Inheritance and the cascade are two different mechanisms that work side by side, and people often mix them up. The cascade decides which rule wins when several rules target the same element. Inheritance is what happens when no rule targets an element at all, so it falls back to its parent's value.

The order is worth holding onto. First the browser looks for rules that match the element directly and lets the cascade pick a winner. Only if nothing matches a given property does inheritance step in and pull the value down from the parent. So a directly matched rule always beats an inherited value, because the inherited value was never a competitor in the first place; it only fills the gap left when no rule applied. That is also why color: inherit is sometimes necessary: it turns an inherited value into an explicit, cascade-level declaration so it can win on purpose.

Practice

Two minutes each, and each one locks in a single idea. Use a blank CodePen, your browser's DevTools, or one of our tools to experiment:

  1. Make a <div> with a paragraph inside, and another paragraph inside that one. Set color: teal and a font-family only on the outer div. Confirm both nested paragraphs turn teal in that font without you touching them. That is inheritance flowing down the tree.
  2. On that same outer div, add border: 2px solid teal and padding: 20px. Confirm the inner elements get neither a border nor padding of their own. You just watched box-ish properties refuse to inherit.
  3. Put a link inside a colored paragraph. It will show the browser's default link blue, not the paragraph's color. Now add a { color: inherit } and watch the link adopt the paragraph color. That is the inherit keyword forcing a value that was not flowing on its own.

The mental model to keep

  • The page is a tree; styles flow from parent to child to grandchild, top to bottom.
  • Text-ish properties (color, font, line-height, text-align) inherit; box-ish ones (margin, padding, border, background, width, display) do not.
  • inherit, initial, unset and revert let you control that behaviour by hand.
  • Set your base color and font once on body and let the whole document inherit it.

That is inheritance: the quiet partner to the cascade that keeps your CSS short and your pages consistent. With it in hand, the next step is seeing how elements actually occupy space, which starts with the box model.