CSS Inheritance Table
| Keyword | Computed value | Field note |
|---|---|---|
inherit | Parent's computed value | Even for properties that don't inherit by default |
initial | The spec's initial value | Resets to the DEFAULT, not the browser stylesheet - color becomes black |
unset | Inherit if natural, else initial | The two-faced keyword: inherit for inheritable props, initial for the rest |
revert | Browser/user stylesheet value | Undoes author styles back to the USER level - not the spec default |
revert-layer | Roll back one @layer | The cascade-layers escape hatch |
all: unset | Every property at once | The nuclear reset for embedded widgets |
CSS inheritance is the mechanism that lets font, color and line-height flow down a document without repeating them - while width, margin and border stay local by default. The table below is the working six keywords: each one overrides the cascade at a different level, and the two-faced unset is the identity that explains the whole system.
Bottom line: the keywords roll back to different origins. initial goes all the way to the SPEC's default value (color: initial is black - not your theme's black). revert rolls back to the USER level - undoing your author styles but respecting the reader's browser preferences. unset is the two-faced one: inherit for naturally-inherited properties, initial for the rest.
The honest part: knowing WHICH properties inherit is the other half. Inherited: color, font-family, font-size, line-height, letter-spacing, text-align, visibility, cursor. Not inherited: everything layout - width, height, margin, padding, border, background, display, position. The rule of thumb: if it affects what text looks like, it inherits; if it affects where boxes sit, it doesn't.
How to use
- Use inherit to force inheritance on non-default properties - the classic: background: transparent; color: inherit on buttons and links.
- Use initial when a library's override must go to the spec default - knowing that default is not your theme's default.
- Use unset as the two-purpose reset when you want 'act as if I never styled this' - it resolves per-property automatically.
Frequently asked questions
What is the difference between initial and unset?
initial always applies the SPEC's default value for the property; unset applies the inherited value IF the property naturally inherits, and the initial value otherwise. Example on a div (which doesn't inherit borders): border-color: initial is currentColor per spec; border-color: unset is initial too (borders don't inherit). But color: unset is inherit (color inherits naturally), while color: initial is black. On inherited properties unset equals inherit; on the rest it equals initial.
What does revert roll back to that initial does not?
The USER level. The cascade stacks three origins - browser defaults, user preferences (larger fonts, forced colors, reader modes), and author styles - and revert undoes author styles back to whatever the user or browser would have applied. initial skips that user level entirely: it goes to the SPEC default even if the user's browser preference said otherwise. For accessibility-respecting resets, revert is the correct keyword.
Why do buttons and inputs look wrong until I reset them?
Because form elements carry browser default styles that don't inherit: buttons have their own font, background and border that ignore the page's inherited font-family. The fix is an explicit bridge: button { font: inherit; color: inherit; background: none; border: none; } - each line pulls a property the browser stylesheet had localized. The all: unset shorthand is the nuclear version, followed by rebuilding the styles you actually want.
What is the difference between revert and revert-layer?
revert rolls back past ALL of your author styles to the user level; revert-layer (with @layer cascade layers) rolls back only to the previous layer - undoing one layer's contribution while keeping the rest. As CSS adoption of @layer grows, revert-layer becomes the modular reset: a component layer can be switched off wholesale without touching the base or theme layers around it.