CSS Inheritance & Cascade

What is CSS Inheritance?

CSS inheritance is the mechanism where child elements automatically receive property values from their parent elements. Not all properties inherit — only certain "inherited properties" like color, font-family,font-size, and line-height do by default.

Inherited Properties

untitled.css

CSS

1	/* These properties INHERIT by default */
2	color: inherit; /* ✅ inherits */
3	font-size: inherit; /* ✅ inherits */
4	font-family: inherit; /* ✅ inherits */
5	line-height: inherit; /* ✅ inherits */
6	text-align: inherit; /* ✅ inherits */
7	visibility: inherit; /* ✅ inherits */
8	cursor: inherit; /* ✅ inherits */

Non-Inherited Properties

untitled.css

CSS

1	/* These properties do NOT inherit by default */
2	margin: inherit; /* ❌ doesn't inherit */
3	padding: inherit; /* ❌ doesn't inherit */
4	border: inherit; /* ❌ doesn't inherit */
5	background: inherit; /* ❌ doesn't inherit */
6	width: inherit; /* ❌ doesn't inherit */
7	display: inherit; /* ❌ doesn't inherit */
8	position: inherit; /* ❌ doesn't inherit */

The inherit Keyword

The inheritkeyword forces any property to inherit its value from its parent element, even properties that don't inherit by default.

untitled.css

CSS

1	.child {
2	/* Force inheritance for non-inherited properties */
3	margin: inherit;
4	padding: inherit;
5	border: inherit;
6	background: inherit;
7	}
8
9	/* Common use case: reset links to inherit color */
10	a {
11	color: inherit;
12	text-decoration: none;
13	}
14
15	/* Force child to use parent's font */
16	.child {
17	font-size: inherit;
18	}

The initial Keyword

The initial keyword resets a property to its CSS specification default value, regardless of what the parent has set.

untitled.css

CSS

1	.child {
2	/* Reset to CSS spec defaults */
3	color: initial; /* becomes canvas text color (usually black) */
4	font-size: initial; /* becomes medium (typically 16px) */
5	margin: initial; /* becomes 0 */
6	display: initial; /* becomes inline */
7	visibility: initial; /* becomes visible */
8	}

⚠

warning

Warning: initial may not be what you expect. For example, display: initial sets it to inline, not block.

The unset Keyword

The unset keyword is a combination of inherit andinitial. If a property is inherited, it acts like inherit. If not, it acts like initial.

untitled.css

CSS

1	.reset-all * {
2	/* For inherited properties: use parent's value */
3	/* For non-inherited properties: use initial value */
4	color: unset; /* inherits (inherited property) */
5	margin: unset; /* becomes 0 (non-inherited) */
6	padding: unset; /* becomes 0 (non-inherited) */
7	font-size: unset; /* inherits (inherited property) */
8	border: unset; /* becomes none (non-inherited) */
9	}

📝

note

Tip: unset is commonly used in CSS resets to strip browser default styles while respecting inheritance.

The revert Keyword

The revertkeyword rolls back a property to the previous cascade origin — typically the browser's user agent stylesheet.

untitled.css

CSS

1	/* Revert to browser defaults */
2	body {
3	margin: revert; /* back to browser's 8px */
4	font-size: revert; /* back to browser's medium */
5	line-height: revert; /* back to browser's normal */
6	color: revert; /* back to browser's text color */
7	}

Cascade Origins

User agent — browser defaults
User — browser user styles
Author — your CSS (highest priority)

Cascade & Specificity

The cascade determines which CSS rule wins when multiple rules target the same element. Specificity is calculated as a tuple:(inline, IDs, classes, elements).

untitled.css

CSS

1	/* Specificity: 0,0,1,0 — 1 element */
2	p { color: black; }
3
4	/* Specificity: 0,0,1,1 — 1 class, 1 element */
5	.intro { color: blue; }
6
7	/* Specificity: 0,1,0,0 — 1 ID */
8	#hero { color: red; }
9
10	/* Specificity: 0,1,1,1 — 1 ID, 1 class, 1 element */
11	#hero .intro p { color: green; }
12
13	/* Specificity: 1,0,0,0 — inline style */
14	<p style="color: orange">Inline wins</p>

⚠

warning

Warning: !important breaks the normal specificity cascade. Use sparingly — prefer specificity over !important.

Practical Examples

Reset All Styles

untitled.css

CSS

1	/* Modern CSS reset */
2	*,
3	*::before,
4	*::after {
5	box-sizing: border-box;
6	margin: 0;
7	padding: 0;
8	}
9
10	body {
11	min-height: 100vh;
12	line-height: 1.5;
13	-webkit-font-smoothing: antialiased;
14	}
15
16	img, picture, video, canvas, svg {
17	display: block;
18	max-width: 100%;
19	}
20
21	input, button, textarea, select {
22	font: inherit;
23	}
24
25	a {
26	color: inherit;
27	text-decoration: none;
28	}
29
30	ul, ol {
31	list-style: none;
32	}

Theming with Inheritance

untitled.css

CSS

1	:root {
2	--text-primary: #E0E0E0;
3	--text-secondary: #808080;
4	--bg-primary: #0D0D0D;
5	--accent: #00FF41;
6	}
7
8	body {
9	color: var(--text-primary);
10	background: var(--bg-primary);
11	}
12
13	/* Children inherit theme values automatically */
14	.card {
15	background: var(--bg-primary);
16	border: 1px solid currentColor;
17	color: inherit; /* Use parent's text color */
18	}

Property Value Sources

Each CSS property can come from different sources, checked in this order:

Inline styles (highest priority)
ID selectors
Class selectors
Element selectors
Inherited values (lowest priority)