Retour au cours

Lesson 39: Inheritance and The Inherited Properties

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

39. Inheritance and The Inherited Properties

Inheritance is another crucial mechanism of the Cascade. Some CSS properties, when applied to a parent element, are automatically passed down to its descendants.

How Inheritance Works

If you set color: red; on the <body> element, all text elements (p, h1, span, etc.) inside the body will naturally inherit that color, unless a more specific rule overrides it.

Example:

html

This text is green.

This text is also green.

css body { color: green; }

Commonly Inherited Properties

Properties that relate to typography and text presentation are typically inherited, as it usually makes sense for text to look consistent:

  • color
  • font-family, font-size, font-weight, font-style
  • line-height
  • text-align
  • list-style

Non-Inherited Properties

Properties related to the Box Model and layout are generally not inherited, as it would cause chaos if every child inherited the parent's padding, margin, or border.

  • width, height
  • padding, margin, border
  • background-color, background-image
  • display, position

Forcing Inheritance

You can explicitly tell any property (even non-inherited ones) to take the value of its parent using the inherit keyword.

css .child-box { border: inherit; /* If parent has a border, the child uses the same border */ }