CSS Inheritance

Font family inherit – CSS Inheritance | What is CSS Inherit Keyword? | List of CSS Properties that are Inherited

by

Font family inherit: In CSS, inheritance manages what occurs when no value is named for a property on an element. This tutorial helps you more in learning about the CSS inherit Keyword along with the inherited and non-inherited properties. Click on the below available links and understand the concept of Inheritance in CSS.

CSS Inheritance

There are some CSS selectors that actually inherit styles from their parent element.

This helps us to specify the style of a particular element explicitly.

Some other properties make more sense to not be inherited.

For example, fonts, when we set the font-family to the body element, all other element inside the body tags get the same font. In better words, the children of the body elements inherit the CSS style/ font.

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

CSS properties can be classified into two types:

  • inherited properties, which by default are set to the computed value of the parent element
  • non-inherited properties, which by default are set to the initial value of the property

CSS inherit Keyword Definition & Syntax

In CSS, the inherit keyword defines that a property should inherit its value from its parent element. However, it can be used for any CSS property, and on any HTML element.

Syntax:

property

: inherit;

Example:

* {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

html {
  font-size: 125%;
  font-family: sans-serif;
  line-height: 1.5;
  color: #222;
}

List of CSS Properties that are Inherited

List of the properties that inherit their parent style:

  • 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

Forcing properties to inherit

Suppose one of the elements doesn’t inherit their parent, then we can explicitly state that to inherit their parent.

Example:

body {
    background-color: yellow;
}

p {
  background-color: inherit;
}

Forcing properties to NOT inherit

With contradiction, we also want some element not to inherit their parent.

We can use revert property value to explicitly tell not to inherit their parent.

This is very rarely used though.

Other special values

In addition to the keywords, inherit and revert, we can also set values like:

  • initial: use the default browser stylesheet if available. If not, and if the property inherits by default, inherit the value. Otherwise do nothing.
  • unset: if the property inherits by default, inherit. Otherwise do nothing.