Learn HTML and CSS: Custom properties and var()

Custom properties

Walter can't decide on the house colour: first petrol blue, then purple, then green after all. Every time you change the same colour code in five places, unless you store it once under a name of its own.

A value with a name

A custom property is a value with a name of its own that starts with two dashes, like --accent: #2a9d8f;. You usually put it on :root, the page's <html>, so it counts everywhere.

With var(--accent) you use that value, in any property. If Walter picks another colour, you change just that one rule, and everything follows. The name is case-sensitive: --Accent is a different one from --accent.

On the page the header, the footer, the button and the edges of the benches all take their colour from --accent.

style.css

1:root {2  --accent: #2a9d8f;3}4header,5footer,6.button {7  background: var(--accent);8}9.bench {10  border-top-color: var(--accent);11}

repaircafe.example

Try it yourself

Walter picks a new house colour, #6d597a. Store it in --accent on :root, and give the header, the footer and the button that background.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Broken? Not Today!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="benches.html">Benches</a>15      <a href="dates.html">Dates</a>16      <a href="sign-up.html">Sign up</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Every first Saturday of the month at the parish hall in Dorchester. Bring your broken things: we fix them together.</p>21    <a class="button" href="sign-up.html">Sign up your device</a>22    <section class="benches">23      <article class="bench bike">24        <span class="tag">Full</span>25        <h2>Bikes</h2>26        <p>A flat tyre or a weak brake? Jeff and Mark will help you.</p>27      </article>28      <article class="bench electrics">29        <h2>Electrics</h2>30        <p>Lamps, toasters and coffee machines.</p>31      </article>32      <article class="bench sewing">33        <span class="tag">New</span>34        <h2>Sewing corner</h2>35        <p>A loose seam or a broken zip.</p>36      </article>37      <article class="bench computer">38        <h2>Computers</h2>39        <p>A slow laptop or a cracked screen.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parish hall, 12 Church Street, Dorchester DT1 1JG</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

A value with a name

A custom property is a value with a name of its own that starts with two dashes, like --accent: #2a9d8f;. You usually put it on :root, the page's <html>, so it counts everywhere.

On the page the header, the footer, the button and the edges of the benches all take their colour from --accent.

style.css

1:root {2  --accent: #2a9d8f;3}4header,5footer,6.button {7  background: var(--accent);8}9.bench {10  border-top-color: var(--accent);11}

repaircafe.example

Try it yourself

Walter picks a new house colour, #6d597a. Store it in --accent on :root, and give the header, the footer and the button that background.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Broken? Not Today!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="benches.html">Benches</a>15      <a href="dates.html">Dates</a>16      <a href="sign-up.html">Sign up</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Every first Saturday of the month at the parish hall in Dorchester. Bring your broken things: we fix them together.</p>21    <a class="button" href="sign-up.html">Sign up your device</a>22    <section class="benches">23      <article class="bench bike">24        <span class="tag">Full</span>25        <h2>Bikes</h2>26        <p>A flat tyre or a weak brake? Jeff and Mark will help you.</p>27      </article>28      <article class="bench electrics">29        <h2>Electrics</h2>30        <p>Lamps, toasters and coffee machines.</p>31      </article>32      <article class="bench sewing">33        <span class="tag">New</span>34        <h2>Sewing corner</h2>35        <p>A loose seam or a broken zip.</p>36      </article>37      <article class="bench computer">38        <h2>Computers</h2>39        <p>A slow laptop or a cracked screen.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parish hall, 12 Church Street, Dorchester DT1 1JG</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example