CSS Inheritance

Definition

CSS Inheritance is the mechanism by which certain CSS property values are passed down from a parent element to its child elements in the document tree.

Why It Matters

Inheritance reduces the amount of code needed by allowing text styles to be declared once on a parent container (like body) instead of on every paragraph or list item.

Core Concepts

• Inherited Properties: Text-related properties like color, font-family, font-size, and line-height are inherited by default.
• Non-Inherited Properties: Layout and box properties like margin, border, padding, width, and height are not inherited.
• Override: Inherited properties can be overridden by targeting child elements directly with a more specific rule.

body {
  font-family: 'Helvetica', sans-serif;
  color: #333; /* Inherited by all children */
}

p {
  margin: 20px; /* NOT inherited by children of <p> */
}

Connected Concepts

• CSS Cascade
• CSS Selector Model
• CSS Box Model