×

css · level 3 · unit 1 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

Give var() a second value for when the token is missing.

var(--accent, crimson) reads --accent, and if nothing above sets it, uses crimson instead. That second value is the fallback, the same idea as a font list. Components shared between sites rely on it.

There is a trap. If the token exists but holds the wrong kind of value, like --gap: red used for padding, the fallback is not used. The browser only spots the problem when it works out the , the final value for each property.

By then it is too late to try an earlier declaration. The property drops to its , the value it has before any CSS, or inherits if it normally does.

<span class="badge">Sold out</span>
.badge {
  padding: 2px 8px;
  color: white;
  background-color: var(--accent, crimson);
}

Press show my page to see it here.

Add :root { --accent: navy; } above the rule and run it again to see the token beat the fallback.