meet it

Name a value once with a , then reuse it.

Real sites repeat the same brand colour in dozens of rules. Change it, and you hunt through every one. A custom property fixes that: a value you name yourself, starting with two dashes, like --brand: #0f766e;.

Set it on , a selector for the top element of the page, and every element can use it. To read it back, use : write var(--brand) wherever the value should go.

Teams call these shared, named values tokens. Change a in one place and every rule that reads it follows.

<h1>Fern and Co</h1>
<p>Plants delivered to your door.</p>
<a class="btn" href="https://example.com/shop">Shop now</a>

:root {
  --brand: #0f766e;
}
h1 {
  color: var(--brand);
}
.btn {
  padding: 8px 16px;
  color: white;
  background-color: var(--brand);
}

Press show my page to see it here.

Change #0f766e to #9a3412 and run it again: the heading and the button change together.

guess first

One token, two rules. What colour is the border?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<h2>Weekly report</h2>
<p class="tag">Draft</p>

:root {
  --accent: crimson;
}
h2 {
  color: var(--accent);
}
.tag {
  border: 2px solid var(--accent);
}

your turn

Your turn. Give the bakery its brand colour.

Store a dark colour of your choice in --brand on :root, then make the heading read it with var(). The button already reads it.

the page you’re styling

<h1>Crumb Bakery</h1>
<p>Fresh bread from seven.</p>
<a class="btn" href="https://example.com/order">Order</a>

your css

Your code

Press show my page to see it here.

--brand holds a valuenot checked yet
the button shows your colournot checked yet
the heading reads --brandnot checked yet

fix it

The links stayed blue. Can you fix it?

the page you’re styling

<nav>
  <a href="https://example.com/">Home</a>
  <a href="https://example.com/blog">Blog</a>
</nav>

your css

Broken code to fix

Press show my page to see it here.

the links use the --link colournot checked yet
the links are boldnot checked yet

The links are bold, so the rule works. Look at how the colour value is written.
A token's name on its own is not a value. The browser has to be told to read it.
Wrap the name in var(): color: var(--link);, then press run.

nailed it

you named your first token. :D

A custom property starts with two dashes: --brand.
Set tokens on :root so every element can reach them.
Read a token back with var(--brand).

new words in your collection

custom property
:root
var()
token

This lesson isn’t saved. A free account remembers every lesson you finish.

Name a value once with a custom property, then reuse it.

One token, two rules. What colour is the border?

Your turn. Give the bakery its brand colour.

The links stayed blue. Can you fix it?

you named your first token. :D

Name a value once with a , then reuse it.