Inheritance in CSS

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;
}

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.