Global values

Each property has its own values: color takes colors, display takes block, flex and others. But there are four keywords that every property understands: inherit, initial, unset and revert. They do not set a specific color or size — they say where to take the value from.

inherit — like the parent

inherit takes the value from the parent element. For example, links do not inherit the text color: the browser paints them blue. color: inherit gives a link the same color as the text around it:

<style>
  .footer { color: seagreen; }
  .footer a { color: inherit; }
</style>
 
<p class="footer">The site footer. The <a href="#">link</a> has the same color.</p>

Change the color of .footer — the link follows it.

initial — the initial value

initial brings back the initial value of the property — the one written for it in the CSS standard. For color it is usually black:

<style>
  .box { color: crimson; }
  .box span { color: initial; }
</style>
 
<p class="box">Red text, <span>but here color: initial makes it black</span>.</p>

The initial value does not always match the browser's style. For example, for display it is inline, so a div with display: initial becomes an inline element.

unset — a smart reset

unset behaves in two ways: for inherited properties (color, font) it works like inherit, for the others (border, spacing) — like initial:

<style>
  .card { color: navy; padding: 8px; border: 2px solid navy; }
  .card p { color: crimson; border: 2px dashed crimson; }
  .card .plain { color: unset; border: unset; }
</style>
 
<div class="card">
  <p>Its own color and its own border</p>
  <p class="plain">unset: the color comes from the card, no border</p>
</div>

revert — back to the browser style

revert cancels your rules and returns the value from the browser's default styles. It is handy after a reset: at the top of the file the bullets were removed from lists, but inside an article they are needed again:

<style>
  ul { list-style: none; padding: 0; }
  .article ul { list-style: revert; padding: revert; }
</style>
 
<ul><li>Menu</li><li>Contacts</li></ul>
<div class="article">
  <ul><li>An article item</li><li>Another item</li></ul>
</div>

The all property

all sets a value for every property of an element at once. Most often you see all: unset — the element loses all its styling. This is how a button is turned into a "link button":

<style>
  .link-button {
    all: unset;
    color: royalblue;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
 
<button>A regular button</button>
<button class="link-button">A button without styling</button>

Along with everything else, all: unset removes the focus ring, so such buttons should get a :focus-visible style.

Cheat sheet

Common mistake

all is a property too, and the order of declarations matters. If all: unset is written at the end of a rule, it wipes out everything set above it:

<style>
  .a { color: crimson; font-weight: 700; all: unset; }
  .b { all: unset; color: crimson; font-weight: 700; }
</style>
 
<p><span class="a">all at the end — the styles are gone</span></p>
<p><span class="b">all at the start — the styles are in place</span></p>

Put all on the first line of a rule, and your own properties after it.