Usually inherited
color, font-family, font-size, line-height and text-align often pass down.
Platform under construction
Inheritance
Inheritance lets child elements receive some values from their parents. It is why setting font and color on body can style large parts of a site.
body { color: #f7f9ff; font-family: Inter, sans-serif; }
.article { line-height: 1.7; }
a { color: inherit; }
Cascade & Control
Inheritance is CSS passing useful values down the tree.
Some CSS properties naturally inherit from parent elements. Text-related properties such as color, font-family and line-height often inherit because that makes documents easier to style.
Layout properties such as margin, padding, border and display usually do not inherit. If every child inherited layout, pages would become impossible to control.
Inheritance is powerful when used deliberately. Set global typography once, then override only where the design actually needs it.
Usually not inherited
margin, padding, border, width, height and display do not normally pass down.
inherit keyword
Forces a property to use the parent value.
initial keyword
Returns a property to its initial CSS value.
Visual model
Control CSS by understanding the browser decision path.
The browser does not apply styles emotionally. It follows a priority system. These diagrams make that priority visible before you start changing declarations.
font-family and color set here can flow into children.
May inherit text settings without declaring them again.
Can override color for a specific content area.
Often has browser default color unless you style it.
Examples
Write CSS that wins for a reason.
Global typography through inheritance
body {
font-family: Inter, system-ui, sans-serif;
color: #f7f9ff;
line-height: 1.6;
}
.muted {
color: #a8b2c4;
}
Repeating inherited values everywhere
h1 { font-family: Inter; color: white; }
p { font-family: Inter; color: white; }
li { font-family: Inter; color: white; }
a { font-family: Inter; color: white; }
Rules that matter
Control comes from reducing surprise.
CSS becomes easier when every override has a reason. If a rule wins by accident, the next developer has to debug your intention instead of the code.
Set base text styles high
body is a good place for font-family, text color and basic line-height.
Do not repeat inherited values
If a child already receives the value, repeating it adds noise.
Know what does not inherit
Spacing and layout usually need their own rules.
Use inherit intentionally
inherit is useful for links or form controls that should match surrounding text.
Watch browser defaults
Links and form controls may have default styles that interrupt inheritance.
Use DevTools Computed
Computed styles show whether a value was inherited and from where.
Production thinking
The cascade is architecture, not trivia.
Why does this matter?
Inheritance keeps CSS smaller and more consistent. It lets a design system flow through a document instead of forcing every element to repeat the same values.
Accessibility
Inherited typography can improve readability across the whole site. Be careful with inherited low contrast or tiny text because the problem spreads quickly.
Production note
Production CSS often starts with base styles on html and body, then component rules override only what needs to be different.
SEO note
Readable inherited typography helps users consume content. That supports engagement, even though inheritance itself is not a ranking signal.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change color on .article and watch the paragraph inherit it.
- Remove color: inherit from a and compare the link color.
- Add padding to .article and notice that children do not inherit it.
Practice assignment
Do this before moving to the next lesson.
- Create a parent element with color and font-family.
- Add child elements and identify which values they inherit.
- Use DevTools Computed to find one inherited value.
Try it yourself
Use inheritance to control typography
Self-check
Before you continue, prove that you understand Inheritance.
Answer these questions before moving on. If the answer is vague, inspect the lab example and trace which declaration wins.
- Can you name three properties that commonly inherit?
- Can you name three properties that usually do not inherit?
- Can you explain why layout properties do not normally inherit?
- Can you use color: inherit on a link intentionally?
- Can you find inherited values in DevTools?
Senior audit upgrade
Inheritance can be controlled deliberately.
Some properties inherit naturally, especially text-related properties. Others do not. Keywords let you reset or force that behavior when needed.
inherit
Forces a property to use the parent computed value.
initial
Resets a property to its CSS initial value, not necessarily the browser default you expected.
unset and revert
unset acts as inherit or initial depending on the property. revert rolls back to the previous cascade origin.