CSS Les 3: Kleuren en tekst

Home›CSS-track›Les 3

🖌️ Kleuren, eenheden en tekst

⏱ Geschatte leestijd: 25 minuten · 7 stappen

Kleuren en typografie zijn de twee zaken die het meest bepalen hoe een pagina aanvoelt. In deze les leer je alle kleurformaten, hoe je lettertypes instelt — inclusief Google Fonts — en hoe je de juiste eenheden kiest voor font-grootte.

1 Kleurformaten: named en hex

CSS kent vier manieren om kleuren op te schrijven. Ze zijn allemaal geldig; kies wat voor jou het duidelijkst is.

Named colors en hexadecimaal

/* Named colors — 140+ kleurnamen in CSS */
h1 { color: tomato; }
p  { color: steelblue; }
body { background-color: whitesmoke; }

/* Hexadecimaal — #RRGGBB of verkort #RGB */
h1 { color: #e55a00; }   /* oranje */
p  { color: #334155; }   /* donkerblauw */
a  { color: #2dd4bf; }   /* teal */

/* Verkorte notatie: #abc = #aabbcc */
.badge { background: #f0f; }  /* = #ff00ff = magenta */

#e55a00

#2dd4bf

#6366f1

#f43f5e

Wat betekent dit?

Een hex-kleur heeft zes tekens: twee voor rood (RR), twee voor groen (GG), twee voor blauw (BB). Elke waarde loopt van 00 (geen) tot ff (maximaal). #ff0000 is puur rood.

2 rgb() en hsl()

Twee andere kleurformaten die makkelijker aan te passen zijn dan hex.

rgb() en hsl() — meer leesbaar

/* rgb(rood, groen, blauw) — waarden 0-255 */
h1 { color: rgb(229, 90, 0); }       /* oranje */
body { background: rgb(245, 245, 245); } /* lichtgrijs */

/* rgba() — met transparantie (0 = onzichtbaar, 1 = vol) */
.overlay { background: rgba(0, 0, 0, 0.5); } /* 50% zwart */

/* hsl(tint, verzadiging, helderheid) */
h1 { color: hsl(24, 100%, 45%); }   /* oranje */
p  { color: hsl(220, 15%, 35%); }   /* grijsblauw */

/* hsla() — met transparantie */
.tip { background: hsla(160, 70%, 90%, 0.8); }

Voordeel rgb()

Direct de drie kleurkanalen instellen. Handig als je met kleurenwaarden van een design-tool werkt.

Voordeel hsl()

Makkelijk aanpassen: verander alleen de helderheid voor een lichtere/donkere tint van dezelfde kleur.

3 font-family en Google Fonts

Met font-family stel je het lettertype in. Altijd een "fallback" meegeeven — niet iedereen heeft hetzelfde lettertype geïnstalleerd.

font-family met fallback-stack

/* Fallback-stack: eerste beschikbare wordt gebruikt */
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* Systeemlettertypen — geen download nodig */
body {
  font-family: system-ui, -apple-system, sans-serif;
}

/* Google Fonts: voeg eerst de <link> toe in <head> */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> */
body {
  font-family: 'Inter', sans-serif;
}

💡 Google Fonts geeft gratis toegang tot honderden lettertypes. Zoek op fonts.google.com, kies een lettertype en kopieer de <link>-tag naar je <head>. Daarna kun je het als font-family gebruiken.

4 font-size: px, rem en em

Drie veelgebruikte eenheden voor lettergrootte — elk met een ander referentiepunt.

px, rem en em vergeleken

/* px — vaste pixels, schaalt niet mee */
h1 { font-size: 32px; }

/* rem — relatief aan de root (<html>), standaard 16px */
h1 { font-size: 2rem; }    /* 2 × 16 = 32px */
p  { font-size: 1rem; }    /* 1 × 16 = 16px */
small { font-size: 0.875rem; } /* 14px */

/* em — relatief aan het PARENT-element */
.kaart {
  font-size: 18px;
}
.kaart p {
  font-size: 0.9em; /* 0.9 × 18 = 16.2px */
}

Eenheid	Relatief aan	Gebruik wanneer
px	Scherm pixels	Borders, shadows, vaste afmetingen
rem ⭐	Root font-size (html)	Font-sizes, spacing — gebruik dit het meest
em	Parent font-size	Componenten die intern schalen

5 Tekststijlen: weight, line-height, align en decoration

Tekststijlen

p {
  font-weight: 400;      /* normal | bold | 100-900 */
  line-height: 1.6;      /* 1.5–1.8 is goed leesbaar */
  text-align: left;      /* left | center | right | justify */
  text-decoration: none; /* none | underline | line-through */
  letter-spacing: 0.02em; /* ruimte tussen letters */
  text-transform: uppercase; /* uppercase | lowercase | capitalize */
}

h1 {
  font-weight: 700;     /* bold */
  letter-spacing: -0.02em; /* iets dichter bij koppen */
}

a {
  text-decoration: none; /* haal standaard onderstreping weg */
}
a:hover {
  text-decoration: underline; /* terug bij hover */
}

Leestip: line-height

line-height: 1.6 betekent "1.6 keer de font-size". Voor bodytekst is 1.5–1.8 ideaal. Gebruik een getal zonder eenheid — dan schaalt het mee met de font-size.

6 Oefening 1: Kleuren en lettertype

Opdracht:

✓ Geef body een background-color met hsl() of rgb()

✓ Geef h1 een color in hexadecimaal (#...)

✓ Stel een font-family in op body

✓ Geef p een line-height van minstens 1.5

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <style>
    /* Schrijf hier je CSS */

  </style>
</head>
<body>
  <h1>Mijn reisblog</h1>
  <p>Afgelopen zomer reisde ik door Japan. De tempels, het eten en de mensen maakten het tot een onvergetelijke ervaring.</p>
  <p>Volgende bestemming: Portugal. Lissabon staat al jaren op mijn lijst.</p>
</body>
</html>

Live preview

7 Oefening 2: Tekststijlen

Opdracht:

✓ Geef h1 een font-size in rem

✓ Geef h1 een font-weight van 700 of hoger

✓ Centreer de tekst in h1 met text-align: center

✓ Verwijder de onderstreping van links (text-decoration: none)

✓ Voeg een :hover effect toe aan de link

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <style>
    body { background: #f8fafc; font-family: Arial, sans-serif; padding: 24px; margin: 0; }
    /* Voeg hier tekststijlen toe */

  </style>
</head>
<body>
  <h1>Mijn portfolio</h1>
  <p>Welkom op mijn pagina. Ik ben een MBO Software Developer student.</p>
  <p>Bekijk mijn <a href="#">projecten</a> of neem <a href="#">contact</a> op.</p>
</body>
</html>

Live preview

Kennischeck

4 vragen over kleuren en tekst.

← Les 2 Les 4: Box model →