CSS Inheritance

Learn how CSS properties are inherited from parent to child elements, and which properties inherit by default.

Overview

CSS inheritance is the mechanism by which some CSS properties are automatically passed down from a parent element to its children. Setting a font on `<body>` means every element inside it will use that font unless overridden. **Inherited by default:** color, font-family, font-size, font-weight, line-height, letter-spacing, text-align, visibility, cursor. **Not inherited:** margin, padding, border, width, height, background, display, position. You can explicitly control inheritance: `inherit` forces a property to inherit, `initial` resets to browser default.

Key Points

•Inherited properties flow from parent to child automatically (color, font, line-height)
•Non-inherited properties (margin, padding, border) start at their initial values
•Set font-family and color on body to apply them globally via inheritance
•inherit: forces a property to inherit from its parent
•initial: resets a property to its CSS specification default
•unset: inherits if the property inherits by default; otherwise resets to initial

Examples

Inheritance in action

body {
  color: #333;
  font-family: Arial, sans-serif;
}
/* h1, p, span inside body all inherit color and font-family */

Setting text styles on body is the most efficient way to set default typography.

Non-inherited property: margin does NOT flow down

section { margin: 40px auto; }
/* Children of section do NOT inherit margin: 40px auto */

Forcing inheritance with inherit

a { color: inherit; }  /* link uses parent color, not default blue */

Common Mistakes

Wondering why margin/padding is not inheriting layout properties are not inherited
Setting the same font-family on every element when one rule on body would suffice
Forgetting that <a> tags override inherited color with default blue use color: inherit

Note

Use inheritance as a feature. Set your base font, color, and line-height on body. Only write overrides where needed.

CSS Inheritance

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Which property is inherited by default in CSS?