Inheritance

Definition

The mechanism by which certain CSS properties are passed down from a parent element to its children.

Explain Like I'm New

If you set the `color` and `font-family` on the `<body>` tag, you don't have to rewrite it for every single paragraph inside the body. The paragraphs 'inherit' the font and color from their parent.

Real World Example

Setting `font-family: 'Open Sans', sans-serif;` on the `html` selector so your entire website uses the same font automatically.

Common Use Cases

•Writing DRY (Don't Repeat Yourself) CSS
•Setting global themes

Interactive Example

Interview Questions

basic

Do ALL CSS properties inherit automatically?

intermediate

How do you force a property to inherit if it doesn't normally do so?

Flash Cards

Question

Do all inherit?

Click to reveal answer

Answer

No! Typography properties (color, font-size, line-height) inherit. Layout properties (margin, padding, border) do NOT inherit. (If you put a border on a parent div, the child paragraphs don't get borders too!).

Question

Force inheritance?

Click to reveal answer

Answer

Use the value `inherit`. Example: `border: inherit;`.