CSS Inheritance: Styles Flow Downhill
CSS inheritance is like genetics for web elements: children inherit styles like color and font-family from their parents. This is why setting a font on <body> styles a whole page.
Why it exists
To keep stylesheets DRY (Don't Repeat Yourself) and manageable. Without inheritance, you would have to explicitly style every single element on a page, leading to massive, unmaintainable CSS files. Inheritance provides a sensible default styling cascade from parent to child.
The mental model
Think of the Document Object Model (DOM) as a family tree. When you apply a style to a parent element, like setting the color of a , its children (, , etc.) inherit that color, just like children might inherit eye color. This flow of styles "downhill" from ancestor to descendant is the core of inheritance. However, a child can always have its own specific style, which will override what it would have inherited.
How it works
When a browser renders an element, it determines a value for every CSS property. It first checks for a value applied directly to the element. If none exists, it checks if the property is inheritable. If so, the browser walks up the DOM tree to the parent element and uses its value for that property. This continues up the tree until a value is found or the root (<html>) is reached. If no inherited value is found, the property's browser-defined initial value is used.
When to use it
You leverage inheritance constantly, often without thinking. It's best for properties you want to set globally and have trickle down, such as font-family, font-size, font-weight, line-height, color, and text-align. Setting these on a high-level element like <body> is a common and effective pattern. You can also explicitly force inheritance on any property using the inherit keyword, for example border: inherit;.
When not to use it
Inheritance is not the default for properties that control an element's geometry or spacing. Properties like width, height, padding, margin, and border do not inherit because it would usually be undesirable. Imagine if every element inherited a 500px width from its parent—pages would become unusable. These properties are meant to be specific to the element they are applied to.
One canonical example
Consider this HTML: <body>Hello, world!</body>. If your CSS is body { font-family: "Helvetica"; color: blue; } em { color: red; }, the tag inherits both font-family and color from <body>. The tag also inherits font-family from <body> (via ), but its color will be red because a more specific rule targets it directly, overriding the inherited blue.
Interview question
Why do properties like width, margin, and padding typically not inherit in CSS?
- a.Because inheriting them would often lead to broken layouts and unusable pages.Correct
- b.They are always defined directly on elements, making inheritance redundant.
- c.To ensure better browser rendering performance by limiting inherited styles.
- d.Only properties that affect an element's visual appearance, like color, are inheritable.
Why? this is the answer
The card explicitly states that properties like width, height, padding, margin, and border do not inherit because it would usually be undesirable, leading to unusable pages. The other options present plausible but incorrect reasons not mentioned in the card.
Just read this? Test yourself on what you have been reading.
Read the original → en.wikipedia.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles