CSS Inheritance is a concept where properties set on a selector are inherited by its children. While not all properties exhibit this behavior, it helps in writing concise and efficient CSS code by avoiding the need to set the same property for each individual child element.

Certain properties, such as font-related properties, are logical to be inherited, as they can be applied to the parent element and automatically flow down to its children. On the other hand, properties like background color are not intended to be inherited.

Inherited Properties:

Here are some commonly used properties that inherit by default:

  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-size-adjust
  • font-stretch
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • quotes
  • tab-size
  • text-align
  • text-align-last
  • text-decoration-color
  • text-indent
  • text-justify
  • text-shadow
  • text-transform
  • visibility
  • white-space
  • widows
  • word-break
  • word-spacing

These properties provide a glimpse of the most commonly encountered inherited attributes. For an extensive list, refer to the Sitepoint article on CSS inheritance.

Forcing Inheritance:

What if you want a property that doesn’t inherit by default to be inherited by the children?

You can achieve this by explicitly setting the property value to inherit in the child selector.

For example:

body {
 background-color: yellow;
}

p {
 background-color: inherit;
}

This forces the background color of the p element to inherit from its parent (body).

Preventing Inheritance:

Conversely, if you want to prevent a property from inheriting, you can use the revert keyword. It resets the property value to the default one established by the browser’s default stylesheet.

In practice, revert is not commonly used; instead, developers tend to overwrite the inherited value by specifying a new value for the property.

Additional Special Values:

Apart from inherit and revert, you can also utilize the following special keywords for properties:

  • initial: Uses the default value defined in the browser’s stylesheet, or, if the property inherits by default, it applies the inherited value. Otherwise, it has no effect.
  • unset: Inherits the property if it is set to inherit by default; otherwise, it has no effect.