Inheritance

Some properties are inherited by their parent element, e.g. font-family and color. That means that if you specify a font-family on the <body> element, all child elements (that is, all elements inside the <body> tag) will also have that same font-family value, unless the property is specified in the child element. E.g.:

div{
  border-radius: 1px;
}

p{
  border-radius: inherit;
}

Not all properties are inherited automatically, such as the border properties. If these properties had been inherited, the page might have looked messy. But you can force properties to inherit values from their parent elements using inherit as the value of that property.

Inheritance saves you from having to apply some properties to as many elements, resulting in a simpler style sheet. E.g., for the code snippet below, all child elements will have the same `font-family` because it is defined in the <body> element:

body{
  font-family: Verdana, sans-serif;
}

p{
  /* No need to define the font-family property,
  but we can specify other properties. */

  color: #1d1d1d;
}
PreviousCascadeNextSelectors

Last updated

Was this helpful?