CSS Values, Keywords, and Inheritance
Understanding what CSS keywords like auto, none, normal, initial, inherit, and unset actually mean prevents hours of debugging. These are the building blocks of every CSS declaration — used constantly but rarely explained in depth.
1. The Universal CSS Value Keywords
These keywords work on any CSS property:
initial — Reset to Specification Default
/* initial: sets the property to the W3C specification's initial value
(not the browser's default stylesheet value — different!) */
.c-reset-color { color: initial; }
/* color's initial value (spec): 'canvastext' (system color)
NOT the same as removing the browser's default of 'black'
Rarely used directly — see 'revert' for a better alternative */
.c-reset-display { display: initial; }
/* display's initial value: 'inline'
Even for block elements like <div> — resets to inline */
inherit — Force Inheritance
/* inherit: explicitly use the same value as the parent element */
/* Example: borders don't inherit by default */
.c-table { border: 1px solid var(--color-border); }
.c-table td { border: inherit; } /* Force inherit border from parent table */
/* Example: force inherit color in elements that don't */
.c-btn { color: inherit; } /* Button uses parent's text color */
.c-input { font-family: inherit; } /* Input uses parent's font */
.c-input { font-size: inherit; } /* Input matches page font size */
/* Commonly inherited properties (automatic): */
/* color, font-*, line-height, text-align, letter-spacing, visibility, cursor */
/* NOT inherited by default (need explicit inherit): */
/* background, border, margin, padding, width, height, display, position, all box-model */
unset — Smart Reset
/* unset: if the property naturally inherits → inherit. If not → initial */
/* For inherited properties: unset = inherit */
/* For non-inherited properties: unset = initial */
.c-reset {
color: unset; /* = inherit (color naturally inherits) */
background: unset; /* = initial (background doesn't inherit) */
border: unset; /* = initial (border doesn't inherit) */
font-size: unset; /* = inherit (font-size naturally inherits) */
}
/* Useful for removing styles from elements inside a CSS reset */
.c-article a {
color: unset; /* Link picks up text color from context */
text-decoration: unset; /* Link gets default decoration from context */
}
revert — Reset to Browser Default
/* revert: resets to the browser's default stylesheet (user-agent stylesheet)
The most useful reset keyword — reverses YOUR styles but keeps browser styles */
/* Scenario: you styled all buttons, but need one to look like a plain button */
.c-btn-plain {
all: revert; /* Resets all properties to browser defaults */
}
/* More surgical: revert specific properties */
button.c-btn-plain {
background: revert; /* Back to browser's gray button background */
border: revert; /* Back to browser's raised border */
padding: revert; /* Back to browser's default button padding */
font: revert; /* Back to browser's system font */
color: revert; /* Back to browser's button text color */
}
revert-layer — Reset Within @layer
/* revert-layer: resets to what the value would be in the previous @layer */
@layer components {
.c-btn { background: var(--color-primary); }
}
@layer utilities {
.u-btn-reset {
background: revert-layer; /* Reverts to what components layer had,
OR to what was set before components layer */
}
}
2. The all Property
Reset multiple (or all) properties at once:
/* all: applies a keyword to ALL CSS properties at once */
.c-isolation {
all: initial; /* Reset EVERYTHING to spec initial values */
all: inherit; /* Inherit EVERYTHING from parent */
all: unset; /* Smart reset EVERYTHING */
all: revert; /* Reset EVERYTHING to browser defaults */
}
/* Practical use: isolated widget that shouldn't inherit page styles */
.c-widget {
all: initial;
/* Now re-apply only what you want */
display: block;
font-family: var(--font-body);
color: var(--color-text);
}
/* Iframe-style reset for embedded components */
.c-embed {
all: revert; /* More useful than initial — keeps useful browser defaults */
}
3. Property-Specific Keywords
auto — Browser Calculates
auto has different meanings depending on the property:
width: auto; /* Block elements: fill available space. Inline: shrink to content */
height: auto; /* Shrink to content height (most common use) */
margin: auto; /* Distribute available space evenly */
margin-left: auto; /* Push to the right within a flex/block container */
overflow: auto; /* Add scrollbar only if content overflows */
position: auto; /* Not applicable — use 'static' instead */
grid-column: auto; /* Auto-place in next available grid cell */
z-index: auto; /* No stacking context created — participate in parent's */
/* The margin:auto centering trick */
.o-container {
max-width: 1200px;
margin-left: auto; /* Shorthand: margin-inline: auto; */
margin-right: auto;
}
/* In Flexbox: margin:auto absorbs all free space */
.c-nav {
display: flex;
align-items: center;
}
.c-nav__spacer { margin-left: auto; } /* Pushes everything after it to the right */
none — Removes the Property's Effect
display: none; /* Removes element from layout + accessibility tree */
outline: none; /* ❌ Dangerous: removes focus ring (accessibility issue) */
outline: none; /* ✅ Only OK if you've added a :focus-visible replacement */
border: none; /* No border (same as border: 0) */
background: none; /* Transparent background (alias for 'transparent') */
text-decoration: none; /* Remove underline from links */
list-style: none; /* Remove bullets from <ul><li> */
transform: none; /* Cancel a transform applied by a parent or :hover */
animation: none; /* Cancel animation (use in prefers-reduced-motion) */
box-shadow: none; /* Remove shadow */
filter: none; /* Remove filter */
content: none; /* Remove ::before or ::after generated content */
normal — The "Correct Default" Value
font-style: normal; /* Plain (not italic) */
font-weight: normal; /* 400 weight */
line-height: normal; /* ~1.2 (browser decides based on font) */
letter-spacing: normal; /* No tracking */
word-spacing: normal; /* Default word gap */
white-space: normal; /* Wraps at spaces, collapses whitespace */
justify-content: normal; /* = stretch in grid, = flex-start in flexbox */
animation: none; /* or normal */
inherit vs currentColor
/* currentColor: a dynamic keyword equal to the current computed 'color' value */
/* Useful for making decorative elements match text color automatically */
.c-icon {
fill: currentColor; /* SVG icon matches its container's text color */
}
.c-border-match {
border-color: currentColor; /* Border matches text color */
}
.c-underline-match {
text-decoration-color: currentColor;
}
/* Practical: theme-aware icons */
.c-nav__link { color: var(--color-text-muted); }
.c-nav__icon { fill: currentColor; } /* Icon color follows link color automatically */
.c-nav__link:hover { color: var(--color-primary); }
/* → Icon also turns primary color on hover — no extra rule needed */
4. Inherited vs Non-Inherited Properties
INHERITED by default (pass from parent to child automatically):
──────────────────────────────────────────────────────────
Typography: font-family, font-size, font-weight, font-style,
line-height, letter-spacing, word-spacing, text-indent,
text-align, text-transform, white-space
Color: color
Visibility: visibility (not display)
Lists: list-style, list-style-type, list-style-image
Cursor: cursor
Direction: direction, writing-mode
Opacity: NO — opacity doesn't inherit (children use parent's stacking)
NOT INHERITED (must explicitly set on each element):
──────────────────────────────────────────────────────────
Box model: margin, padding, width, height, border
Background: background, background-color, background-image
Box: box-shadow, outline
Display: display
Position: position, top, right, bottom, left, z-index
Layout: flex, grid properties
Overflow: overflow
Transform: transform, animation
Opacity: opacity (affects element + children as a group, not individually)
5. CSS Keyword Quick Reference
| Keyword | Meaning | Best Used For |
|---|---|---|
initial | Spec-defined starting value | Edge cases — rarely used directly |
inherit | Copy from parent | Forcing inheritance on non-inherited props |
unset | Inherit if inheritable, else initial | Smart CSS resets |
revert | Browser's default for this element | Reversing your own styles |
revert-layer | Previous @layer value | @layer-based architecture |
auto | Browser calculation | Width, height, margins, overflow |
none | Remove the effect | Display, border, text-decoration |
normal | Property's defined "normal" | font-weight, line-height, white-space |
currentColor | Current color value | SVG fill, border-color, matching accents |
6. Debugging Inheritance Issues
/* DevTools: Computed tab shows the FINAL value of every property
Crossed-out values in Styles tab = property was overridden
"Inherited from [element]" labels show inheritance source */
/* Force-test if a value is inherited */
.c-debug { color: initial; } /* Now check DevTools — what color is it? */
/* If it shows your theme color, it's not 'initial' — check :root */
/* Find which element sets a color */
/* DevTools → Elements → Computed → click arrow next to 'color' → jumps to source */
/* Common issue: font-family not inheriting into inputs */
input, select, textarea, button {
font-family: inherit; /* Browser overrides: inputs default to system font */
font-size: inherit;
}
/* Common issue: color not applying to links inside components */
/* Links have their own color set by browser UA stylesheet */
.c-card a { color: inherit; } /* Force link to inherit the card's text color */