HTML en CSS leren: Custom properties en var()

Custom properties

Walter twijfelt over de huiskleur: eerst petrolblauw, dan paars, dan toch groen. Elke keer pas je dezelfde kleurcode op vijf plaatsen aan, tenzij je ze één keer bewaart onder een eigen naam.

Een waarde met een naam

Een custom property is een waarde met een eigen naam die begint met twee streepjes, zoals --kleur: #2a9d8f;. Je zet ze meestal op :root, de <html> van de pagina, zodat ze overal geldt.

Met var(--kleur) gebruik je die waarde, in elke eigenschap. Kiest Walter een andere kleur, dan pas je alleen die ene regel aan, en verandert alles mee. De naam is hoofdlettergevoelig: --Kleur is een andere dan --kleur.

Op de pagina halen de kop, de voet, de knop en de randen van de tafels hun kleur allemaal uit --kleur.

style.css

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

repaircafe.example

Probeer het zelf

Walter kiest een nieuwe huiskleur, #6d597a. Bewaar ze in --kleur op :root, en geef de kop, de voet en de knop die achtergrond.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</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>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Een waarde met een naam

Een custom property is een waarde met een eigen naam die begint met twee streepjes, zoals --kleur: #2a9d8f;. Je zet ze meestal op :root, de <html> van de pagina, zodat ze overal geldt.

Op de pagina halen de kop, de voet, de knop en de randen van de tafels hun kleur allemaal uit --kleur.

style.css

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

repaircafe.example

Probeer het zelf

Walter kiest een nieuwe huiskleur, #6d597a. Bewaar ze in --kleur op :root, en geef de kop, de voet en de knop die achtergrond.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</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>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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