Skip to main content

What is "inheritance" in CSS? Which properties are inherited by default?

CSSJunior~1 min read
Suggest an edit

Inheritance in CSS is a mechanism by which some properties are automatically passed down to descendants from parent elements. If a parent sets, for example, a text color, child elements inherit that color unless something else is specified.

How it works

Example:

html
<div style="color: blue;"> <p>Text inside a paragraph</p> </div>

The <p> tag itself has no color, but it will inherit it from <div>, and the text will be blue.

Properties inherited by default

Properties related mainly to text and fonts are inherited, for example:

  • color, text color
  • font-family, font
  • font-size, font size
  • font-style, font-weight, style and weight
  • line-height, line spacing
  • text-align, text alignment
  • visibility, visibility
  • cursor, cursor style
  • list-style, list styling
  • letter-spacing, word-spacing, spacing between letters and words

Non-inherited properties

Most properties related to sizes, spacing, borders, positioning, and background are not inherited:

  • margin, padding, border, width, height, background, and so on.

How to control inheritance

CSS lets you control this explicitly using values:

  • inherit, force inheritance
  • initial, reset to the default value
  • unset, inherit if the property is normally inherited; otherwise reset

Example:

css
p { background-color: inherit; }

In short: inheritance makes styling predictable and saves code, child elements automatically pick up some of their parents' visual properties, especially text-related ones.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit