Frontend is a free bonus on CodeMentor AI — the main product is Python. Register to save your progress and unlock all 290 Frontend lessons + 1,000+ Python lessons.Sign up — free

← 🎨 CSS as a design system·Module B1 · Lesson 3

TaskSet body color to #111 and font-family to 'system-ui, sans-serif'. The h1 inside .panel should INHERIT both from body (no explicit color/font-family on h1). Add a .panel rule that just sets padding 20px.

Inheritance: which properties trickle down

75 XP7 minFREE

Theory

Some properties cascade from parent → child

Set color: red on <body> and every child element inherits it — <p>, <h1>, <span>, all red unless explicitly overridden.

body {
  font-family: system-ui;
  font-size: 16px;
  color: #111;
  line-height: 1.6;
}

All four of those inherit. Every descendant element will compute these unless something more specific overrides.

What inherits (common ones)

color, font-family, font-size, font-weight, line-height
text-align, text-decoration, text-indent
letter-spacing, word-spacing, white-space
cursor, visibility, direction

What does NOT inherit

margin, padding, border, width, height
background (background DOES NOT inherit — a child has transparent background by default and the PARENT's background just shows through)
display, position, flex, grid
box-shadow, opacity, transform

Force inheritance with `inherit`

/* Make an anchor inherit color instead of staying blue */
a { color: inherit; }

You can force ANY property to inherit even if it doesn't by default.

Reset values: `initial` / `unset` / `revert`

initial — reset to CSS spec default (color: initial → black).
unset — inherit if inheritable, else initial.
revert — go back to the user-agent default (browser's default for that element).

revert is the most useful — handy when you want to undo your reset on one element.

2 tabs

Live preview

← Previous Next lesson →