This content originally appeared on DEV Community and was authored by Anthony Bañon Arias
🔍 Understanding CSS Inheritance: What Gets Passed Down and What Doesn’t
When writing CSS, understanding how inheritance works can help you write cleaner, more maintainable stylesheets. However, not all CSS properties behave the same way. Some are naturally inherited by child elements, while others are not—requiring you to re-declare them explicitly.
In this post, I’ll guide you through:
- What CSS inheritance actually means
- Which properties are inherited by default
- Which ones aren't (but maybe you think they are!)
- A visual reference table to help you remember
- Some tricky exceptions and how to manage them
📘 What Is CSS Inheritance?
In CSS, inheritance means that some properties applied to a parent element are automatically applied to its child elements—even if you didn’t explicitly declare them again.
For example:
body {
color: darkblue;
}
All children of the body (like paragraphs, headings, and links) will inherit this color, unless they override it themselves.
But not all properties behave this way.
🧠 Default Inheritable Properties
Here are the main categories of CSS properties that are inherited by default:
| Category | Properties (examples) |
|---|---|
| Text | color , letter-spacing, line-height, text-align, text-indent, text-transform, visibility, white-space, word-spacing |
| Typography | font, font-size, font-family, font-style, font-weight, font-variant, line-height |
| Table Layout | border-collapse, border-spacing, caption-side, empty-cells |
| List Styling | list-style, list-style-position, list-style-type, list-style-image |
| Quotes | quotes |
| Directionality | direction, unicode-bidi |
These are inherited automatically because it makes sense semantically typography, direction, and lists should stay consistent through content structure.
🔁 Non-Inherited Properties That Affect Children (by Context)
These properties are not inherited, but their presence on a parent element modifies how the children behave, appear, or render.
| Category | Property | Effect on Children |
|---|---|---|
| Display/Layout | display | Defines whether children become flex/grid/inline-block items |
| Positioning | position | Changes how children are positioned relative to the parent (relative, absolute) |
| Overflow & Clipping | overflow, clip-path, contain | Controls whether children overflow, are clipped, or hidden |
| Visual Effects | opacity, transform, filter | Apply visual transformations that visually affect children too |
| Flex/Grid Context | flex, grid, gap | Turns children into flex/grid items; sets spacing context |
| Z-index & Stacking | z-index | Sets stacking context affecting all descendants |
| Writing Context | direction, writing-mode | Changes the text or layout direction for children |
| Isolation & Blend | isolation, mix-blend-mode | Changes how children blend or isolate within stacking contexts |
| Perspective | perspective, transform-style | Affects how child transforms are rendered in 3D space |
❌ Non-Inherited Properties That Affect Only the Element Itself
These properties apply only to the element where they are declared. They do not influence or change the behavior of children.
| Category | Properties |
|---|---|
| Box Model | margin, padding, width, height, min/max-width, border, box-sizing |
| Visual Appearance | background, background-color, box-shadow, border-radius |
| Positioning | top, right, bottom, left, float, clear |
| Visibility/Interaction | visibility, cursor, pointer-events, user-select, resize |
| Layout & Display | display, flex, grid, gap, align-self, order |
| Transformations | transform, scale, rotate, translate |
| Transitions/Animations | transition, animation, animation-delay, animation-duration |
| Typography (non-inherited) | line-clamp, text-overflow, white-space |
🔧 Forcing Inheritance, Resetting, or Reverting in CSS
CSS provides special keywords to control the value of any property beyond its default behavior. These are extremely useful when dealing with inheritance or when resetting styles in complex environments.
| Keyword | Meaning |
|---|---|
| inherit | Forces the property to inherit its value from the parent element, even if it's not normally inheritable. |
| initial | Resets the property to its default initial value as defined by the CSS specification (usually the browser default). |
| unset | Acts as inherit if the property is naturally inheritable, otherwise behaves as initial. |
| revert | Reverts the property to the value set by the user-agent stylesheet or a previously applied CSS layer like Bootstrap, Tailwind, or a browser reset stylesheet. |
🔄 When to Use Each Keyword
- ✅ Use inherit when you explicitly want child elements to take a value from their parent.
- 🧹 Use initial to remove custom styles and go back to the clean browser default.
- 🤷♂️ Use unset when you're unsure if the property is inheritable—it covers both cases.
- 🔙 Use revert to undo overrides from libraries or external stylesheets, returning to the system/base stylesheet.
📌 Example
p {
color: red;
}
span {
color: inherit; /* Will become red because <span> is inside a <p> */
}
button {
all: unset; /* Removes all styling including margin, padding, border, etc. */
}
📊 Visual Reference Table
Here’s a compact visual table for quick reference:
| Inherited by Default? | Examples |
|---|---|
| ✅ Yes | color, font-*, line-height, visibility, text-align, list-style, quotes |
| ❌ No | margin, padding, display, flex, position, grid, z-index, background, border, width, height, box-shadow |
🧠 Conclusion
Understanding what gets inherited in CSS (and what doesn’t) is key to writing effective and predictable styles. Inheritable properties are mostly related to typography and content flow, while most layout and visual styling needs to be defined explicitly.
If you ever find yourself confused, refer back to this post or use the inherit keyword to take full control.
Thanks for reading!
This content originally appeared on DEV Community and was authored by Anthony Bañon Arias
Anthony Bañon Arias | Sciencx (2025-07-27T00:02:26+00:00) CSS Inheritance. Retrieved from https://www.scien.cx/2025/07/27/css-inheritance/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.