Inheritance

What is Inheritance in CSS?

As outlined in the above chapters, style rules are associated with elements through the usage of inline CSS and/or through the usage of internal/external CSS together with selectors. In addition to that, style rules are being associated with elements through inheritance.

In CSS, inheritance is a mechanism of associating style rules that are applied to a given ancestor element to the descendants of that element in the document tree (a given element A is considered to be descendant of another element B when the element A is nested in the element B).

Inheritance of Text-Related Properties

Generally, the text-related properties are inherited.

The inherited properties include in particular:

• visibility,

• text-align,

• text-indent,

• text-transform,

• word-spacing,

• letter-spacing,

• white-space,

• line-height,

• font,

• color, and

• list-style.

Non-Inheritance of Box-Related Properties

Generally, the box-related properties are not inherited.

The non-inherited properties include in particular:

• display,

• position,

• z-index,

• margin,

• float,

• clear,

• width,

• max-width,

• min-width,

• height,

• max-height,

• min-height,

• outline,

• border,

• padding,

• background,

• overflow,

• vertical-align,

• text-decoration (a text related property).

Controlling Inheritance

It is possible to expressly indicate whether a given property should be inherited or not by using the following keywords:

• inherit - sets the property as inheritable irrespective of its default behavior,

• initial - sets the property value to its default value specified in the CSS specifications (not browser defaults - vide What is use of 'initial' value in CSS?),

• unset - sets the property inheritability to the one specified in CSS specifications (i.e. its default inheritability as outlined in the above chapters), and

• revert - sets the property value to the browser's default.

For example:

p {
  overflow: inherit;
}