How to Use Inheritance in CSS

Use CSS inheritance when child elements should automatically reuse styles from a parent instead of repeating the same rules on every selector. This keeps typography, color, and font settings much cleaner.

What you’ll build or solve

You’ll learn how to use inheritance in CSS by setting styles on a parent and letting child elements reuse them. You’ll also know how to force inheritance with the inherit keyword when a property does not inherit by default.

When this approach works best

This approach is the right choice when multiple nested elements should share the same text styles or theme values.

Common real-world scenarios include:

• Typography systems
• Theme text colors
• Font family defaults
• Link styling inside cards
• Nested component themes

This is a bad idea when layout properties like margin, padding, width, or borders need to vary between children.

Prerequisites

You only need:

• A basic HTML structure with nested elements
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Set shared parent styles and let children inherit them

Start by applying a shared style to the parent container.

<div class="card">
  <h2>Course plan</h2>
  <p>Learn faster with guided lessons.</p>
</div>

<style>
  .card {
    color: #111827;
    font-family: Arial, sans-serif;
  }
</style>

The heading and paragraph automatically inherit the text color and font family.

For non-inherited properties, use the inherit keyword.

<a class="card-link" href="/pricing">View pricing</a>

<style>
  .card-link {
    color: inherit;
  }
</style>

What to look for:

• Text color and font family inherit naturally
• Layout properties usually do not inherit
• inherit forces a child to reuse the parent value
• Great for nested cards, sections, and themes
• Helps reduce repeated typography rules

Examples you can copy

Shared text theme

<section class="dark-theme">
  <p>Primary text</p>
</section>

<style>
  .dark-theme {
    color: white;
  }
</style>

Inherited button font

<div class="toolbar">
  <button>Save</button>
</div>

<style>
  .toolbar {
    font-family: Inter, sans-serif;
  }
</style>

Force link inheritance

<a class="link" href="#">Open docs</a>

<style>
  .link {
    color: inherit;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Expecting layout properties to inherit

What the reader might do:

.container {
  margin: 20px;
}

Why it breaks: child elements do not automatically inherit margin.

Corrected approach:

Apply layout properties directly to the child that needs them.

Mistake 2: Repeating typography on every child

What the reader might do:

.card h2 {
  color: #111827;
}

.card p {
  color: #111827;
}

Why it breaks: repeated styles become harder to maintain.

Corrected approach:

.card {
  color: #111827;
}

Let children inherit the shared value.

Mistake 3: Forgetting inherit on links

What the reader might do:

.card-link {
  text-decoration: none;
}

Why it breaks: the link may still use the browser’s default blue.

Corrected approach:

.card-link {
  color: inherit;
}

Troubleshooting

If a child ignores the parent text color, check whether another selector overrides it.

If spacing does not inherit, remember layout properties usually need direct child rules.

If links stay blue, add color: inherit.

If typography styles repeat too often, move them higher to the parent container.

Quick recap

• Set shared text styles on the parent
• Let children inherit typography naturally
• Use inherit for non-default reuse
• Do not expect layout properties to inherit
• Great for cleaner theme and text systems