CSS Inheritance
Overview
Inheritance is the mechanism where certain CSS properties automatically trickle down from parent elements to all of their nested children. By default, typography properties (like color, font-family, and line-height) inherit, saving developers from having to apply font-family: Arial; to every single <p>, <h1>, and <span> on the page. Conversely, layout properties (like border, margin, and padding) do NOT inherit, because passing a 10px border down to every nested child element would create visual chaos.
Syntax
/*
If we apply this to the <body> tag...
Every text element inside the body will naturally inherit these styles!
*/
body {
font-family: 'Inter', sans-serif;
color: #333333;
line-height: 1.6;
}
/*
We can explicitly FORCE an element to inherit a property
that normally doesn't inherit, using the 'inherit' keyword.
*/
.child-box {
/* Forces the child to mirror its parent's border */
border: inherit;
}Common Pitfalls
- Assuming
<button>and<input>elements inherit typography by default. Due to ancient browser quirks, forms and buttons completely ignore inherited font settings, defaulting to the OS system font. You must explicitly tell them to inherit. - Trying to use inheritance to pass down layout properties like
display: flexorgrid-template-columns. Only typography and text-related properties inherit naturally.
Interview Questions
<input> field to use the exact same font-family as the <body>?You must explicitly declare input { font-family: inherit; }. This commands the input to abandon its hardcoded browser default and listen to its parent.
Real-World Example
A professional CSS reset block that fixes the notorious form inheritance bug.
/*
Force all form controls to inherit the beautiful Google Font
we applied to the <body> tag.
*/
button,
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
color: inherit;
}Check Your Knowledge
Test your understanding of CSS Inheritance with these quick questions.