Replace a repeated colour with a variable.
What to build
A stylesheet with one custom property.
Requirements
:rootdeclares--brandasteal.h1,aand.buttontake their colours fromvar(--brand). For.button, it is the background.
Constraints
The word teal may appear only once.
Example
color: var(--brand);
Why it works
A change to the single declaration now reaches every place that uses it.
Hints
Hint 1
Put the variable on :root.
Hint 2
Read it with var().
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Variables</title>
<style>
:root { --brand: teal; }
h1 { color: var(--brand); }
a { color: var(--brand); }
.button { background: var(--brand); }
</style>
</head>
<body>
<h1>Title</h1>
<a href="/a">A link</a>
<button class="button">Press</button>
</body>
</html>