Inheritance in CSS allows certain properties to pass from parent elements to their child elements automatically. This helps maintain consistency and reduces repetitive code.
- Use inherited properties like color, font-family, and line-height on parent elements to style multiple child elements at once.
- Apply inherit value explicitly (e.g., color: inherit;) to force inheritance where it's not default.
- Structure HTML logically so parent elements control common styles, improving maintainability.
Syntax:
<style>
#parentclass {
color: red;
}
</style>
<div id="parentclass">
Parent Div
<div id="div1Child">Child Div 1</div>
<div id="div2Child">Child Div 2</div>
</div>
- Parent has color: red.
- color is an inheritable CSS property.
- Child divs have no color set.
- They automatically inherit red from the parent.
- Result: child divs display red text.
- Parent has color: black.
- color is an inheritable CSS property.
- #child1 has color: green : overrides parent (specificity).
- #child2 has no color -inherits black from parent.
- #childchild1 has color: red -overrides both parent and child1.
- Result: child1 shows green, child2 shows black, childchild1 shows red.
We cannot inherit all the properties /rules of CSS. All font-* properties are naturally inherited like
- font-size
- font-family
- font-weight
- font-style, etc.
The color property is also inherited.
CSS properties such as height, border, padding, margin, width, etc. are not inherited naturally. We can do inheritance on noninheritable CSS properties. We use inherit for doing so.
CSS Inherit
We use inherit on a CSS property for taking up its parent's element property. Let’s say we have a code:
- Non-inheritable CSS properties (like height, width, margin) can be made to inherit using the inherit keyword.
- Only the direct child inherits it; grandchildren do not and will use their default or browser-computed value.
