typestar

inherit, initial, unset, revert in CSS

Four keywords that say where a value should come from instead of naming one.

.card {
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

.card button {
  /* buttons do not inherit color by default */
  color: inherit;
  font: inherit;
}

.reset-box {
  /* display: initial is `inline`, not `block` */
  display: initial;
  border: initial;
}

.native-again {
  all: revert;
}

How it works

  1. inherit takes the parent's computed value, even for a property that does not inherit.
  2. initial is the property's own default, which is rarely the browser's.
  3. revert goes back to what the browser's own stylesheet said.

Keywords and builtins used here

The run, in numbers

Lines
20
Characters to type
278
Tokens
50
Three-star pace
70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 43 seconds.

Type this snippet

Step 2 of 3 in The cascade, step 8 of 26 in Selectors & the box model.

← Previous Next →