Beginner LevelCSS & Modern Layouts
How does CSS property inheritance work and what do inherit, initial, and unset do?
❓ Interview Prompt: Explain which CSS properties inherit by default and how keyword values control inheritance.
Some CSS properties inherit by default from parent to children; others do not:
Inherited by Default:
color, font-family, font-size, line-height, text-align, visibility, cursor, list-style.
NOT Inherited by Default:
width, height, margin, padding, border, background, display, position, overflow.
Keyword Values:
•
`inherit`: Force inheritance from the parent (even for non-inherited properties).
•
`initial`: Reset to the CSS specification default value.
•
`unset`: Acts as
inherit if the property naturally inherits, otherwise acts as initial.•
`revert`: Reverts to the browser's default stylesheet value.
Code Implementation Example
css
/* Links inherit body color instead of default blue */
a { color: inherit; }
/* Reset all properties on a component */
.isolated-widget {
all: unset;
display: block;
}💡Force inheritance on links and reset all properties with unset.
🎯 Interview Key Takeaway
Text-related properties inherit by default. Use inherit/unset/revert to control inheritance explicitly.
#Inheritance#Cascade#Reset#Beginner
Back to all CSS & Modern Layouts Questions→