CSS Inheritance Guide

Complete guide to CSS inheritance.
Learn which properties inherit and how to control inheritance.

What is CSS Inheritance?

CSS inheritance is a mechanism where certain CSS properties are automatically passed from parent elements to their children. This reduces code repetition and makes styling more efficient.

DOM Tree Inheritance

bodycolor: blue

headerinherits color

nav

maininherits color

span

When body has color: blue, all descendants automatically inherit it.

How It Works

/* Set color on body */
body {
  color: #333;
  font-family: "Inter", sans-serif;
}

/* All children inherit these values */
/* No need to repeat! */
p { /* inherits color: #333 */ }
span { /* inherits color: #333 */ }
div { /* inherits color: #333 */ }

/* Override when needed */
.highlight {
  color: blue; /* Overrides inherited value */
}

Inherited Properties

These CSS properties are automatically inherited by child elements. Most are related to typography and text formatting - properties you typically want consistent throughout a page.

Typography

color

Text color

font-family

Font face

font-size

Text size

font-weight

Bold, normal, etc.

font-style

Italic, oblique, normal

font-variant

Small-caps, etc.

line-height

Line spacing

letter-spacing

Space between letters

word-spacing

Space between words

Text

text-align

Left, center, right, justify

text-indent

First line indentation

text-transform

Uppercase, lowercase

white-space

How whitespace is handled

word-break

Line breaking rules

word-wrap

Long word wrapping

direction

Text direction (ltr/rtl)

text-shadow

Shadow effect on text

Other

visibility

Visible or hidden

cursor

Mouse cursor style

list-style

List bullet/number style

list-style-type

Disc, circle, square, etc.

list-style-position

Inside or outside

quotes

Quote characters

orphans

Min lines at page bottom

widows

Min lines at page top

Visual Example

body {
  color: #1a365d;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
}

/* No color/font rules needed! */
article { }
p { }
span { }
strong { }

This is a paragraph that inherits all the typography styles from its parent.

Even nested spans and strong elements inherit the color and font.

Non-Inherited Properties

These properties are NOT inherited by child elements. This makes sense - you wouldn't want every child to have the same border, margin, or position as its parent!

Box Model

margin

Outside spacing

padding

Inside spacing

border

Element border

width

Element width

height

Element height

box-sizing

Box model type

Visual

background

Background color/image

background-color

Background color

background-image

Background image

box-shadow

Element shadow

opacity

Transparency

outline

Outline style

Layout

display

Block, flex, grid, etc.

position

Static, relative, absolute

top, right, bottom, left

Position offsets

float

Float positioning

clear

Clear floats

z-index

Stack order

overflow

Content overflow handling

Why These Don't Inherit

If margin, padding, or border inherited, every nested element would have the same spacing and borders as its parent - creating a cascading mess. Layout properties like display and position would also cause chaos if inherited.

Visual Example

.parent {
  border: 3px solid blue;
  padding: 20px;
  margin: 10px;
  background: lightblue;
}

.child {
  /* Does NOT inherit:
     - border
     - padding
     - margin
     - background
  */
}

Parent (with border, padding, background)

Child element - no inherited border, padding, or background!

Controlling Inheritance

CSS provides special keywords to control how properties inherit or reset their values.

inherit

Forces the property to inherit from its parent, even if it normally wouldn't.

.child {
  /* Force border to inherit (normally doesn't) */
  border: inherit;

  /* Force background to inherit */
  background: inherit;
}

initial

Resets the property to its initial (default) value as defined in CSS spec.

.element {
  /* Reset to CSS default (usually browser default) */
  color: initial; /* black */
  display: initial; /* inline */
  font-size: initial; /* medium */
}

unset

Acts like 'inherit' for inherited properties, and 'initial' for non-inherited properties.

.element {
  /* For color (inherited): same as inherit */
  color: unset;

  /* For margin (not inherited): same as initial */
  margin: unset;
}

revert

Reverts the property to the value set by the browser's default stylesheet (user-agent styles).

.unstyled-list {
  /* Bring back default bullet points */
  list-style: revert;
}

button.plain {
  /* Restore browser button styles */
  all: revert;
}

Quick Comparison

Keyword	On Inherited Property	On Non-Inherited Property
`inherit`	Takes parent's value	Takes parent's value
`initial`	CSS default value	CSS default value
`unset`	Takes parent's value (like inherit)	CSS default value (like initial)
`revert`	Browser default	Browser default

Practical Examples

1. Setting Global Typography on Body

The most common use of inheritance - set typography once on body and let it cascade to all elements.

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2937;
  letter-spacing: -0.01em;
}

/* All text elements inherit these */
/* No need to repeat in every component! */

This heading inherits

This paragraph inherits font-family, color, and line-height.

Even this span gets the same styles!

2. Resetting Inherited Colors

Sometimes you need to reset colors in a specific section.

.dark-section {
  background: #1f2937;
  color: #f9fafb; /* Override inherited color */
}

/* All children now inherit white text */
.dark-section p,
.dark-section span,
.dark-section a {
  /* All inherit color: #f9fafb */
}

Dark Section

All text in here inherits the light color from the parent.

3. Using Inherit for Hover States

Use inherit to make child elements match their parent on hover.

.card {
  border: 2px solid #e5e7eb;
  padding: 20px;
  transition: border-color 0.2s;
}

.card:hover {
  border-color: #3b82f6;
}

.card:hover .card-icon {
  /* Icon border matches card border on hover */
  border-color: inherit;
}

Hover me

Icon border inherits on hover

4. Using currentColor

currentColor references the inherited (or current) color value - great for icons and borders.

.button {
  color: #3b82f6;
  border: 2px solid currentColor;
  background: transparent;
}

.button:hover {
  color: #1d4ed8;
  /* Border automatically updates! */
}

.icon {
  fill: currentColor;
  /* SVG inherits text color */
}

Icon uses currentColor

Common Gotchas

Watch out for these common inheritance surprises that catch developers off guard.

Links Don't Inherit Color

The <a> tag has its own color set by the browser's default stylesheet. You must explicitly override it.

/* This WON'T work */
body {
  color: #333;
}
/* Links are still blue! */

/* Fix: explicitly set link color */
a {
  color: inherit; /* Now inherits */
}

/* Or set specific color */
a {
  color: #333;
}

This text is dark gray, but this link is blue by default.

With color: inherit: this link matches

Form Elements Don't Inherit Font

<input>, <button>, <textarea>, and <select> have their own font-family set by browsers.

/* Common fix: force inheritance */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Or use 'all' shorthand */
button {
  font: inherit;
}

Default (system font):

With font: inherit:

Tip: Global Reset for Consistency

Many CSS resets include rules to make form elements inherit fonts consistently.

/* Modern CSS reset snippet */
*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

Quick Reference

Keyword	Usage
`inherit`	Force property to take parent's value
`initial`	Reset to CSS specification default
`unset`	Inherit if inheritable, else initial
`revert`	Revert to browser default styles
`currentColor`	Use the current text color value

About CSS Inheritance

Inheritance is one of the core mechanisms of CSS, alongside the cascade and specificity. Understanding which properties inherit helps you write more efficient, maintainable stylesheets.

The general rule: properties related to text and typography inherit, while properties related to box model and layout do not.

Use inherit, initial, unset, and revert keywords to control inheritance behavior when the defaults don't work for your design.

Inspect any element's styles instantly

Frontend Hero's CSS Scanner shows you all CSS properties including inherited values for any element on any website with just 2 clicks.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →