Je eerste CSS: de pagina krijgt kleuren

Maak kennis met de taal CSS en zie hoe je website stopt met eruit te zien alsof hij uit 1995 komt.

Ik laat je zien: wat CSS is

HTML is het skelet van de pagina. CSS is de kleding: kleuren, lettertypes, groottes, afstanden. Het wordt in een apart bestand geschreven en ziet er zo uit:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Lees het hardop zo: “Elke h1-kop, maak die donkerblauw. Elke p-alinea, maak die 18 pixels en donkergrijs.”

Elke regel heeft drie delen:

een selector (h1) – waar de regel op van toepassing is,
een eigenschap (color) – wat we veranderen,
een waarde (darkblue) – waarnaar we het veranderen.

Een dubbele punt scheidt eigenschap en waarde, en elke regel eindigt met een puntkomma. Let op die puntkomma’s – een vergeten puntkomma is de meest voorkomende CSS-fout ter wereld.

Koppelen: vertel je pagina over je CSS

Maak in je my-website-map een nieuw bestand style.css.
Voeg deze regel toe in de <head> van elke HTML-pagina:
```
<link rel="stylesheet" href="style.css">
```
Dit zegt: “De look van deze pagina vind je in het bestand style.css.”
Test of het werkt – zet iets onmogelijk te missen in style.css:
```
body {
  background-color: yellow;
}
```
Opslaan, pagina verversen. Is alles geel? Het werkt! (Je mag het geel nu weer weghalen.)

Kleuren in CSS

Je kunt kleuren schrijven als Engelse woorden (red, darkblue, lightgray, tomato, gold…) of preciezer als een code met een hekje: #1d4ed8 is blauw, #16a34a is groen. Mix je favoriete kleurcode op htmlcolorcodes.com.

Nu jij 💪

Geef je website zijn eerste kleuren. Zet in style.css:

de achtergrondkleur van de hele pagina (body),
de kleur van je koppen (h1, h2),
de grootte en kleur van je alinea’s (p).

Oplossingen – pas de kleuren gerust aan:

🏫 Schoolwebsite – oplossing

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Blauw past goed bij een schoolwebsite – het voelt betrouwbaar (daarom gebruiken banken het ook!).

🙋 Persoonlijke website – oplossing

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Een persoonlijke website mag wat gedurfder – warm oranje zegt “hier leeft het”.

🌍 Reisdagboek – oplossing

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Groen als bossen en weiden – perfect voor een reisdagboek.

⚽ Clubwebsite – oplossing

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Het beste is je clubkleuren – speel je in rood? Dan wordt het rood!

⚠️

Leesbaarheidsregel: donkere tekst op een lichte achtergrond (of andersom). Lichtgeel op wit is onleesbaar. Als je twijfelt, vraag iemand: “Kun je dit comfortabel lezen?”

✅

Controleer jezelf: Je website heeft eigen kleuren – en omdat je CSS in één bestand staat dat aan elke pagina gekoppeld is, zijn al je pagina’s in één keer gekleurd. Slim, toch?

Wat neem je mee uit deze les

CSS = de look. Het staat in een style.css-bestand, gekoppeld met een <link>-tag in <head>.
De regel: selector { eigenschap: waarde; } – en vergeet de puntkomma’s niet.
Eén CSS-bestand kleedt je hele website in één keer aan.