CSS Inheritance: What Properties Are Inherited and How to Control It

Live editor for all the examples will be added soon.

CSS inheritance is a powerful mechanism that allows certain styles applied to a parent element to automatically apply to its child elements. However, not all CSS properties are inherited by default. Understanding which properties are inherited and how to control inheritance gives you more flexibility in managing your styles and ensuring consistency across your design.

In this guide, we’ll explore how CSS inheritance works, which properties are inherited by default, and how to control inheritance using specific CSS rules like inherit, initial, and unset.

1. What is CSS Inheritance?

CSS inheritance is the process by which some CSS properties applied to a parent element are passed down to its child elements. This behavior ensures that child elements can inherit certain styles without needing to explicitly define them, making CSS easier to manage.

For example, if you set the text color on a <div>, all child elements within that <div> will inherit the same text color unless they are explicitly styled otherwise.

Example:

div {
  color: blue;
}
<div>
  <p>This is some text.</p>
  <span>And this is a span.</span>
</div>

In this case, both the <p> and <span> elements will inherit the blue text color from the parent <div> without directly specifying the color for each child.

2. Which CSS Properties Are Inherited by Default?

Not all properties are inherited by default. Generally, properties related to text and font styling are inherited, while properties related to layout and box models are not.

Commonly Inherited Properties:

  1. Text and Font Properties:
  • color
  • font-family
  • font-size
  • font-style
  • font-weight
  • line-height
  • text-align
  • text-indent
  • text-transform
  • visibility
  1. List and Quote Properties:
  • list-style
  • list-style-type
  • list-style-position
  • list-style-image
  • quotes

These properties affect the appearance of text and lists, making it easier to ensure consistency without repeating the same rules for every child element.

Non-Inherited Properties:

Most properties related to box models, layout, and positioning are not inherited. This includes:

  • margin
  • padding
  • border
  • width
  • height
  • display
  • position
  • z-index
  • overflow

By default, these properties do not inherit because they directly affect the size and positioning of elements, which is typically managed independently for each element.

3. How to Control Inheritance with inherit, initial, and unset

Even though not all properties are inherited by default, CSS provides mechanisms to control inheritance. You can use values like inherit, initial, and unset to explicitly manage whether a property is inherited, uses its default value, or behaves based on the cascade.

3.1 inherit

The inherit value forces a child element to inherit a property from its parent, even if it wouldn’t normally inherit that property. This is useful when you want to ensure a specific property is passed down to children.

Example:

p {
  border: 1px solid black; /* Normally, borders are not inherited */
}

span {
  border: inherit; /* Force the span to inherit the border */
}
<p>This is a paragraph with a <span>span inside it.</span></p>

In this case, the <span> element will inherit the border property from the <p> element, even though borders are not inherited by default.

3.2 initial

The initial value resets a property to its initial (default) value as defined by CSS. This is useful when you want to ensure that a property is set to its default value, regardless of any inherited styles.

Example:

div {
  color: blue;
}

p {
  color: initial; /* Reset color to default (typically black) */
}
<div>
  <p>This paragraph will be in the default color.</p>
</div>

In this case, the <p> element will use the browser’s default color (often black) rather than inheriting the blue color from the <div>.

3.3 unset

The unset value behaves as either inherit or initial, depending on whether the property is normally inherited:

  • If the property is inherited, unset acts like inherit.
  • If the property is not inherited, unset acts like initial.

Example:

div {
  color: blue;
}

p {
  color: unset; /* Acts like inherit since color is normally inherited */
}
<div>
  <p>This paragraph will be blue.</p>
</div>

In this case, the <p> element will inherit the blue color from the <div> because unset defaults to inheritance for properties that are typically inherited.

4. Real-World Examples of CSS Inheritance

4.1 Inheriting Font Styles Across Nested Elements

If you want a consistent font style across an entire section of your website, you can define it on a parent container, and the children will inherit it.

.section {
  font-family: "Arial", sans-serif;
  font-size: 16px;
  color: #333;
}
<div class="section">
  <h2>This is a heading</h2>
  <p>This is a paragraph with a <span>span inside</span>.</p>
</div>

In this example:

  • The font-family, font-size, and color applied to the parent <div class="section"> are inherited by the <h2>, <p>, and <span> elements inside it.
  • You do not need to repeat these styles for each child, keeping the CSS cleaner and more efficient.

4.2 Controlling Non-Inherited Properties

If you want to make sure certain properties that are not inherited by default are passed down to child elements, you can use inherit.

.container {
  background-color: lightblue;
}

.container div {
  background-color: inherit; /* Force child divs to inherit background */
}
<div class="container">
  <div>This div inherits the background color.</div>
</div>

In this example:

  • The child <div> will inherit the background-color from its parent, even though background properties are not normally inherited.

5. Using CSS Variables with Inheritance

CSS variables (also known as custom properties) naturally inherit, which makes them very powerful for managing design systems or themes. If you define a variable on a parent element, all children can inherit that variable unless they have a different value specified.

Example:

:root {
  --main-color: blue;
}

.container {
  color: var(--main-color); /* Use variable for color */
}
<div class="container">
  <p>This text will be blue because it inherits the variable.</p>
</div>

In this example:

  • The variable --main-color is defined on the :root (which represents the entire document), and child elements inside the .container inherit the variable value.

6. Non-Inherited Properties and Cascading

Some properties, such as margin, padding, and display, do not inherit from parent elements. These properties are usually defined per element because they affect the layout and positioning.

Example of Non-Inherited Properties:

div {
  margin: 20px;
  padding: 10px;
}

p {
  margin: inherit; /* Force margin inheritance */
}
<div>
  <p>This paragraph will inherit the margin from the parent.</p>
</div>

In this example:

  • By default, the paragraph’s margin would not inherit from the <div>, but the margin: inherit; rule forces it to adopt the same margin as the parent.

7. Managing Inheritance with all Property

The all property is a shorthand that allows you to reset all CSS properties for an element. You can use it with inherit, initial, or unset to control inheritance for every property at once.

Example:

div {
  color: blue;
  background-color: lightgray;
  font-size: 20px;
}

p {
  all: inherit; /* Inherit all properties from parent */
}

In this example, the <p> inside the <div> will inherit all styles, including color, background-color, and font-size, from the parent <div>.

8. Best Practices for Managing CSS Inheritance

8.1 Avoid Repetition with Inheritance

Take advantage of inheritance to reduce redundancy in your CSS. If you want several elements to share common styles (like text color or font family), set those properties on a parent container instead of repeating them for each child.

8.2 Be Aware of Unwanted Inheritance

Sometimes, child elements may inherit styles you didn’t intend them to. In such cases, explicitly set values on the child

elements or use initial to reset styles.

8.3 Use Variables for Consistent Inheritance

Using CSS variables allows for consistent styling across your site. By defining variables at a high level (like :root), you can ensure child elements inherit those values without needing to repeat the styles.

8.4 Understand When to Override Inheritance

When designing complex layouts, you may need to override inherited properties using specific rules or by setting properties like inherit, initial, or unset. This gives you full control over which properties should be inherited and which shouldn’t.

Conclusion

CSS inheritance simplifies the process of styling by allowing certain properties to be passed down from parent to child elements automatically. By understanding which properties are inherited by default (like color and font-related properties) and how to control inheritance using values like inherit, initial, and unset, you can write more efficient and organized CSS.