CSS Inheritance, !important and Cascade Layers

Learn which properties children inherit, how inherit, initial, unset and revert work, when !important is acceptable, and how @layer organises the cascade.

Lesson 31 of 49Intermediate15 min read

Set font-family on the <body> and every paragraph, heading and list on the page uses that font. You didn't write a rule for each one; they inherited it. Inheritance is one of the three ideas behind the "cascading" in Cascading Style Sheets, alongside specificity and source order, and it saves you from repeating yourself thousands of times.

But not everything inherits. Set a border on a <div> and its children don't get borders. Knowing which properties pass down, and how to force or stop it, explains a lot of "why is this text that colour?" moments.

This lesson also covers the tools for winning cascade battles: the !important flag, which beginners often overuse, and cascade layers (@layer), the modern way to decide in advance which group of styles wins. Used well, layers mean you almost never need !important again.

Which properties inherit?

Usually inherited (text-related)Not inherited (box-related)
color, font-family, font-size, font-weightmargin, padding, border
line-height, letter-spacing, text-alignwidth, height, display
list-style, visibility, cursorbackground, position, overflow
Custom properties (--brand)box-shadow, opacity, transform

The rule of thumb: properties that affect text inherit, and properties that affect the box don't. If borders inherited, every nested element would get a border, which would be chaos.

Controlling inheritance with keywords

Four keywords work on any property:

KeywordEffect
inheritTake the parent's value, even for properties that don't normally inherit
initialUse the property's default value from the CSS specification
unsetAct like inherit for inherited properties, and initial for the rest
revertGo back to the browser's own default style for that element

A common use is button { font: inherit; color: inherit; }, because form controls don't inherit fonts by default. The all property resets every property at once: all: unset strips an element back to a blank slate.

!important

Adding !important to a declaration makes it beat any normal declaration, whatever the specificity:

CSS
.alert { color: red !important; }

It's a sledgehammer. Once one rule uses it, the only way to override it is another !important with higher specificity, and stylesheets end up in an arms race. Acceptable uses are rare: utility classes that must always win, such as .hidden { display: none !important; }, overriding inline styles from a third-party widget you can't edit, and user accessibility stylesheets.

Cascade layers with @layer

Layers let you group styles and say which group wins, before specificity is even checked:

CSS
@layer reset, base, components, utilities;

@layer base { a { color: blue; } }
@layer components { .nav a { color: black; } }
@layer utilities { .text-red { color: red; } }

The first line sets the order. Later layers beat earlier layers, so a simple .text-red in utilities beats a more specific selector in components. Styles that aren't in any layer beat all layered styles. This is ideal for bringing in a framework or reset: put it in an early layer and your own styles win without fighting specificity.

CSS Inheritance Syntax

Inheritance and layers

.child { color: inherit; border: inherit; }
.reset { margin: initial; }
.plain { all: unset; }
.undo { font-weight: revert; }
.hidden { display: none !important; }

@layer base, components;
@layer base { h1 { color: navy; } }

CSS Inheritance Summary

  • Text-related properties such as color and font inherit; box properties such as margin and border don't.
  • inherit, initial, unset and revert control inheritance for any property.
  • Form controls don't inherit fonts, so use font: inherit on them.
  • !important beats normal rules but makes CSS hard to maintain; keep it for utilities.
  • @layer sets which group of styles wins, regardless of specificity.

CSS Inheritance Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Inheritance in action

.card {
  color: #6d28d9;
  font-family: Georgia, serif;
  border: 3px solid #6d28d9;
  padding: 12px;
}

.fixed {
  font: inherit;
  color: inherit;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 3Colour and font pass down to the heading and paragraph.
  2. Line 4The border stays on the card; children don't get their own borders.
  3. Lines 9 to 10Buttons don't inherit fonts by default, so the second one asks for them.
Example 2

inherit, initial, unset and revert

.parent {
  color: #b45309;
  border: 2px dashed #b45309;
  padding: 8px;
  font-family: sans-serif;
}

.a { border: inherit; padding: 4px; }
.b { color: initial; }
.c { font-weight: 400; }
.c { font-weight: revert; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 8The paragraph copies the parent's dashed border.
  2. Line 9The default colour value is black, not the parent's amber.
  3. Lines 10 to 11revert goes back to the browser's bold for headings, undoing line 10.
Example 3

Cascade layers beat specificity

@layer components, utilities;

@layer components {
  .nav a { color: #111827; font: 600 18px sans-serif; }
}

@layer utilities {
  .text-red { color: #dc2626; }
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Utilities come after components, so they win.
  2. Line 4.nav a has higher specificity than .text-red.
  3. Line 8The single class still wins, because its layer is later.

Common CSS Inheritance Mistakes

Expecting borders and padding to inherit

Don't
.box { padding: 20px; } /* expecting children to get padding too */
Do
.box > * { padding: 20px; }

Box properties don't inherit. Target the children directly if they need the style.

Fixing every conflict with !important

Don't
.button { color: white !important; }
.nav .button { color: black !important; }
Do
@layer base, components;
@layer components { .button { color: white; } }

Fix the cause: lower the specificity of the winning rule, reorder rules, or use layers.

Forgetting font inheritance on form controls

Don't
body { font-family: "Inter", sans-serif; } /* inputs and buttons still use the system font */
Do
body { font-family: "Inter", sans-serif; }
input, button, select, textarea { font: inherit; }

CSS Inheritance in Real Projects

Inheritance and layers in practice

Modern CSS resets begin with font: inherit on form controls. Tailwind CSS v4 puts its base styles, components and utilities into cascade layers, so utilities always win. Large companies use layers to keep third-party widget styles below their own. !important still appears in utility classes such as Bootstrap's .d-none, which must hide an element no matter what.

CSS Inheritance Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Make the button use its parent's font.

button {
  font: ;
}
Multiple choiceeasy

Which property is inherited by default?

Multiple choicemedium

What does @layer base, utilities; do?

Multiple choicemedium

Which keyword returns a property to the browser's default for that element?

Fix the bugmedium

The note should use the card's colour and font, and the input should match the page font. Fix the CSS.

.card { color: rgb(22, 101, 52); font-family: Georgia, serif; }
.note { color: initial; }
.field { font-family: initial; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Note uses the card colour
  • Input uses the card font

CSS Inheritance Quiz

5 questions to check what you learned.

  1. Why doesn't a border set on a parent appear on its children?

    • It's a bug
    • Borders need !important
    • border isn't an inherited property
    • Children can't have borders

  2. Which styles win when cascade layers are used?

    • Unlayered styles, then the last layer declared
    • Layered styles always beat unlayered ones
    • The first layer declared
    • The most specific, ignoring layers

  3. What does all: unset do?

    • Deletes the element
    • Removes classes
    • Turns off JavaScript
    • Resets every property to inherit or initial

  4. When is !important reasonable?

    • On every colour
    • In utility classes that must always apply, like a hidden class
    • To fix any conflict quickly
    • It's never allowed

  5. Are CSS custom properties inherited?

    • No, never
    • Only on :root
    • Yes, they inherit by default
    • Only with !important

CSS Inheritance Challenge

Tidy up a form's styles

  1. Make all button and input elements use font: inherit
  2. Create layers in this order: base, utilities
  3. In base, give .form button a color of rgb(255, 255, 255) and a background of rgb(37, 99, 235)
  4. In utilities, give .danger a background of rgb(220, 38, 38)
.form { font: 18px Georgia, serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Controls inherit the font
  • Save button is blue
  • Delete button is red
  • Uses cascade layers

Related CSS topics

30Specificity & CascadeWhich rule wins when two rules disagree, and how to stop fighting your CSS.33CSS VariablesStore colours and sizes once, reuse everywhere, and switch themes.04SelectorsTarget exactly the elements you want by tag, class, id, family or attribute.
Esc
↑↓ to navigateEnter to open