Inherited Styles in CSS

In CSS, some properties are inherited by child elements from their parents. This is a powerful feature that reduces repetition.

How Inheritance Works

When you set a property on a parent element, certain properties automatically apply to all its children:

body {
    color: #333;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* All text inside body inherits these styles —
   paragraphs, headings, lists, spans, etc. */

Properties That ARE Inherited

Mostly text-related properties:

• color
• font-family, font-size, font-weight, font-style
• line-height
• text-align, text-transform
• letter-spacing, word-spacing
• visibility, cursor

Properties That Are NOT Inherited

Mostly box-model and layout properties:

• margin, padding, border
• width, height
• background
• display, position

Forcing Inheritance

You can force a property to inherit using the inherit keyword:

div {
    border: 1px solid black;
}

p {
    border: inherit; /* Now p inherits the border */
}

Inheritance is one of the key mechanisms that makes CSS efficient — set a property once on a parent and let it flow down.