CSS Inheritance

When you set some properties on a selector in CSS, they are inherited by all the children of that selector.

I said some, because not all properties show this behaviour.

This happens because some properties make sense to be inherited. This helps us write CSS much more concisely, since we don’t have to explicitly set that property again on every single children.

Some other properties make more sense to not be inherited.

Think about fonts: you don’t need to apply the font-family to every single tag of your page. You set the body tag font, and every children inherits it, along with other properties.

The background-color property, on the other hand, makes little sense to be inherited.

Properties that inherit

Here is a list of the properties that do inherit. The list is non-comprehensive, but those rules are just the most popular ones you’ll likely use:

• 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

I got it from this nice Sitepoint article on CSS inheritance.

Forcing properties to inherit

What if you have a property that’s not inherited by default, and you want it to, in a children?

In the children, you set the property value to the special keyword inherit.

Example:

body {
	background-color: yellow;
}

p {
  background-color: inherit;
}

Forcing properties to NOT inherit

On the contrary, you might have a property inherited and you want to avoid so.

For an inherited property, initial sets the spec default and revert sets the browser default. Either one stops the inherited value.

You can use the revert keyword to roll the value back to what the previous cascade origin would give. For author styles that usually means the browser default stylesheet, or user styles if any.

In practice this is rarely used, and most of the times you’ll just set another value for the property to overwrite that inherited value.

The all shorthand resets every property at once, for example all: unset.

Other special values

In addition to the inherit and revert special keywords we just saw, you can also set any property to:

• initial: the property’s initial value as defined in the CSS spec, not the browser stylesheet, and it does not inherit. Example: display: initial on a div gives inline.
• unset: if the property inherits by default, inherit. Otherwise initial.
• revert-layer (Chrome 99, Firefox 97, Safari 15.4): rolls back to the value from the previous cascade layer.

Those keywords sit next to CSS specificity and the CSS cascade.

Want me to talk about your product? You can sponsor this site.