🎨CSS

Wat is CSS?

CSS staat voor Cascading Style Sheets. Waar HTML de inhoud en structuur van een pagina beschrijft, bepaalt CSS het uitzicht: kleuren, lettertypes, marges, de plaats van elementen en zelfs animaties.

Zonder CSS ziet elke pagina eruit zoals in 1995: zwarte tekst op een witte achtergrond. Met CSS krijgt ze karakter, en dat zonder je HTML aan te passen. Eén stylesheet kan het uitzicht van een héle website tegelijk bepalen.

De opbouw van een CSS-regel

CSS bestaat uit regels. Elke regel zegt: kies deze elementen en geef ze deze eigenschappen.

stijl.cssh1 {
    color: blue;
    font-size: 32px;
}

Eigenschap en waarde staan gescheiden door een dubbele punt. Elke declaratie eindigt met een puntkomma.

Drie manieren om CSS toe te voegen

1. Extern (in een apart bestand) ← zo doen wij het altijd. Je koppelt het bestand in de head met <link>:

index.html<head>
    <link rel="stylesheet" href="css/stijl.css">
</head>

2. Intern: in de pagina zelf, in een <style>-element in de head. Handig voor een snel proefje, of als je één pagina hebt.

<head>
    <style>
        h1 { color: blue; }
    </style>
</head>

3. Inline: rechtstreeks bij één element met het style-attribuut. Zonder selector en zonder accolades.

<p style="color: blue; font-size: 20px;">Deze alinea is blauw.</p>

Commentaar en witruimte

Commentaar schrijf je tussen /* en */. De browser negeert het. Witruimte (spaties, enters) maakt voor CSS niet uit, dus zet elke declaratie op een eigen regel en spring in: dat is veel leesbaarder.

/* ---------- Titels ---------- */
h1 {
    color: navy;          /* donkerblauw */
    text-align: center;
}

Hoe werkt het samen met HTML?

CSS zoekt in je HTML de elementen die bij de selector passen en geeft ze de eigenschappen. Daarom zijn id en class uit de HTML-cursus zo belangrijk: dat zijn de haakjes waaraan je CSS zich vasthangt (zie volgend hoofdstuk).

Zo verwerkt de browser je paginaBrowser laadt index.html
   └─ leest <link rel="stylesheet" href="css/stijl.css">
        └─ laadt stijl.css
             └─ past elke regel toe op de passende elementen

Element-, klasse- en id-selectors

De drie basis-selectors kies je op basis van de HTML:

p { color: gray; }                /* alle alinea's */
.tip { background: #fef9c3; }     /* alles met class="tip" */
#hoofdtitel { font-size: 40px; }  /* het element met id="hoofdtitel" */

Groeperen en combineren

Je kan selectors combineren om nauwkeuriger te kiezen:

Pseudo-klassen: toestanden

Een pseudo-klasse (met een dubbele punt) kiest een element in een bepaalde toestand of positie:

Attribuut-selectors en pseudo-elementen

Met attribuut-selectors kies je op basis van een attribuut in de HTML:

input[type="text"] { border: 2px solid gray; }       /* enkel tekstvelden */
a[href^="https"]   { color: green; }                  /* links die met https beginnen */
a[target="_blank"] { font-style: italic; }

Pseudo-elementen (met een dubbele dubbele punt) kiezen een deel van een element, of voegen zelf inhoud toe:

p::first-letter { font-size: 200%; }      /* de eerste letter */
p::first-line   { font-weight: bold; }
.nieuw::before  { content: "🆕 "; }        /* voegt tekst vóór het element toe */
.extern::after  { content: " ↗"; }

Tekstkleur en achtergrondkleur

Twee eigenschappen gebruik je voortdurend:

• color: de kleur van de tekst (en van randen die geen eigen kleur hebben);
• background-color: de kleur van de achtergrond.

body {
    background-color: #f8fafc;
    color: #1e293b;
}

Kleuren schrijven: vier notaties

Ze geven allemaal dezelfde soort resultaat, dus kies de notatie die je het handigst vindt. In ontwerpen (Figma) krijg je meestal een hex-code: die kopieer je gewoon.

Achtergrondafbeeldingen

Met background-image zet je een afbeelding achter een element. Met een paar extra eigenschappen bepaal je hoe:

.hero {
    background-image: url("../img/strand.jpg");
    background-size: cover;        /* vul het hele vlak, snij bij indien nodig */
    background-position: center;   /* waar de afbeelding staat */
    background-repeat: no-repeat;  /* niet herhalen */
    height: 300px;                 /* zonder hoogte is het element mogelijk leeg */
}

Kleurverlopen

Een verloop (gradient) is een achtergrond die van de ene kleur naar de andere overgaat, zonder afbeelding. Je zet het in background of background-image:

.banner {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
}
.cirkel {
    background: radial-gradient(circle, yellow, orange);
}

Bij linear-gradient geef je een richting (to right, to bottom, 45deg) en daarna twee of meer kleuren.

Doorzichtigheid: opacity

Met opacity (0 tot 1) maak je een heel element doorzichtig, inclusief tekst en kinderen. Wil je enkel de achtergrond doorzichtig maken en de tekst leesbaar houden, gebruik dan rgba() in background-color.

.vervaagd { opacity: 0.4; }                                  /* alles 40% zichtbaar */
.glas     { background-color: rgba(255, 255, 255, 0.6); }    /* enkel de achtergrond */

Het lettertype kiezen: font-family

Met font-family kies je het lettertype. Je geeft altijd een lijstje: de browser probeert ze van links naar rechts, en het laatste is een generieke familie als reserve.

body {
    font-family: "Segoe UI", Arial, sans-serif;
}
h1 {
    font-family: Georgia, "Times New Roman", serif;
}
code {
    font-family: Consolas, monospace;
}

Eigen lettertypes met Google Fonts

Niet elke bezoeker heeft jouw lettertype geïnstalleerd. Met Google Fonts laad je een lettertype van het internet in. Kies er een op fonts.google.com, en kopieer de <link> naar je head:

in de <head> van je HTML<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

Daarna gebruik je het gewoon in je CSS, met een reserve-lettertype:

body {
    font-family: "Poppins", sans-serif;
}

Grootte, gewicht en stijl

Koppen zijn standaard al groter en vet. Wil je ze anders, dan pas je ze aan met deze eigenschappen; maar kies nog altijd de juiste HTML-kop (h1, h2, …) voor de betekenis.

Uitlijning, regelafstand en versiering

Links opmaken

Een link heeft meerdere toestanden, elk met een eigen pseudo-klasse. Schrijf ze in deze volgorde (LoVe HAte): anders overschrijft een regel de andere.

a:link    { color: royalblue; }        /* nog niet bezocht */
a:visited { color: purple; }           /* al bezocht */
a:hover   { color: crimson; }          /* muis erop */
a:active  { color: red; }              /* ingedrukt */

In de praktijk schrijf je vaak gewoon a en a:hover. Wil je het onderstreepte weg (bijvoorbeeld in een menu), gebruik dan text-decoration: none.

a {
    color: royalblue;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Lijsten opmaken

Met list-style verander je de opsommingstekens: list-style: none haalt ze weg (nodig voor een menu), square, circle en decimal kunnen ook. Bij menu’s haal je meestal ook de standaardruimte weg met padding: 0 en margin: 0.

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Elk element is een doos

Voor CSS is elk HTML-element een rechthoekige doos, opgebouwd uit vier lagen, van binnen naar buiten:

Het boxmodel┌──────────────────────── margin ─────────────────────────┐
│   ┌──────────────────── border ─────────────────────┐   │
│   │   ┌───────────────── padding ────────────────┐  │   │
│   │   │                                           │  │   │
│   │   │          content (tekst, afbeelding)      │  │   │
│   │   │                                           │  │   │
│   │   └───────────────────────────────────────────┘  │   │
│   └──────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

Padding en margin schrijven

Je kan één waarde voor alle vier de zijden geven, of ze apart instellen. Bij meerdere waarden ga je met de wijzers van de klok: boven, rechts, onder, links.

padding: 10px;                 /* alle vier de zijden */
padding: 10px 20px;            /* boven en onder 10px, links en rechts 20px */
padding: 10px 20px 30px;       /* boven 10, links/rechts 20, onder 30 */
padding: 10px 20px 30px 40px;  /* boven, rechts, onder, links */

padding-top: 10px;             /* of één zijde apart */
margin-left: 50px;

Dezelfde schrijfwijze werkt voor margin. Bij margin kan je ook auto gebruiken: margin: 0 auto; centreert een blok horizontaal, mits het een vaste width heeft.

Randen en afgeronde hoeken

De verkorte eigenschap border bevat drie dingen: dikte, stijl en kleur.

border: 2px solid #1e40af;       /* dikte stijl kleur */
border-bottom: 1px dashed gray;  /* enkel de onderkant */
border-radius: 8px;              /* afgeronde hoeken */
border-radius: 50%;              /* een cirkel (bij een vierkant) */

Stijlen: solid (lijn), dashed (streepjes), dotted (puntjes), none (geen). Zonder stijl verschijnt er geen rand, ook al geef je een dikte en kleur.

box-sizing: de grote valkuil

Geef je een element width: 200px en padding: 20px plus een rand van 5px, hoe breed is het dan? Standaard 430px (200 + 2×20 + 2×5): padding en rand komen bovenop de breedte! Dat rekent lastig.

Met box-sizing: border-box tellen padding en rand mee in de breedte: het element is dan echt 200px breed. Bijna elke ontwikkelaar zet daarom onderaan zijn stylesheet-begin:

bovenaan elk stylesheet*, *::before, *::after {
    box-sizing: border-box;
}

Schaduw en overloop

Een schaduw geeft diepte: box-shadow: x y vervaging kleur.

.kaart {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);   /* zacht, onderaan */
}

Wat als de inhoud groter is dan de doos? Met overflow bepaal je wat er gebeurt: visible (standaard, loopt eruit), hidden (afgesneden), scroll / auto (schuifbalk).

Absolute en relatieve eenheden

Bij afmetingen (lettergrootte, breedte, marges, …) kies je een eenheid. Die zijn twee soorten:

• Absoluut: altijd even groot. Enkel px (pixel) is daarvan nuttig op scherm.
• Relatief: afhankelijk van iets anders (de ouder, de lettergrootte of het scherm). Die zorgen voor pagina’s die zich aanpassen.

rem: de beste keuze voor tekst

Standaard is 1rem gelijk aan 16px. Schrijf je lettergroottes in rem, dan schalen ze mee als een bezoeker in zijn browser een grotere tekstgrootte kiest (belangrijk voor slechtzienden). Met pixels gebeurt dat niet.

body { font-size: 1rem; }        /* 16px */
h1   { font-size: 2.5rem; }      /* 40px */
h2   { font-size: 1.75rem; }     /* 28px */
small { font-size: 0.875rem; }   /* 14px */

Procenten en meegroeiende blokken

Met % laat je een element meegroeien met zijn ouder. Combineer het met max-width voor een meegroeiende maar begrensde container: dat is de basis van een goede pagina.

.container {
    width: 90%;            /* op een klein scherm: 90% van de breedte */
    max-width: 1000px;     /* op een groot scherm: nooit breder dan 1000px */
    margin: 0 auto;        /* gecentreerd */
}
img {
    max-width: 100%;       /* een afbeelding wordt nooit breder dan haar ouder */
    height: auto;          /* behoud de verhoudingen */
}

vw, vh en calc()

vh en vw zijn percentages van het scherm (viewport): 100vh is de volledige schermhoogte, ideaal voor een hero-blok. Met calc() reken je met verschillende eenheden door elkaar:

.hero    { height: 100vh; }                     /* volledige schermhoogte */
.inhoud  { width: calc(100% - 250px); }         /* alles behalve een zijbalk van 250px */
h1       { font-size: clamp(1.5rem, 5vw, 3rem); }   /* meegroeiend, maar tussen 1.5rem en 3rem */

Het probleem: conflicterende regels

Meerdere regels kunnen op hetzelfde element van toepassing zijn en elkaar tegenspreken:

HTML<p id="intro" class="tip">Welke kleur ben ik?</p>

CSSp      { color: blue; }
.tip   { color: green; }
#intro { color: red; }

De tekst wordt rood. De browser lost het conflict op met drie criteria, in deze volgorde: 1. belangrijkheid (!important), 2. specificiteit en 3. volgorde in het bestand.

Specificiteit: hoe “gericht” is een selector?

Hoe specifieker een selector, hoe zwaarder hij weegt. De rangorde, van zwak naar sterk:

Je telt het aantal id’s, klassen en elementen in de selector. Eén id wint van duizend klassen, en één klasse wint van duizend elementen:

Specificiteit tellenp                → (0,0,1)
.tip             → (0,1,0)     wint van p
p.tip            → (0,1,1)     wint van .tip
nav ul li a      → (0,0,4)
.menu a:hover    → (0,2,1)
#intro           → (1,0,0)     wint van alle voorgaande

Bij gelijke specificiteit: de laatste wint

Hebben twee regels evenveel gewicht, dan wint de regel die het laatst in het stylesheet staat (of het laatst geladen wordt).

.knop { background: blue; }
.knop { background: red; }   /* deze wint: hij staat onderaan */

Overerving (inheritance)

Sommige eigenschappen worden doorgegeven van een ouder aan zijn kinderen, zodat je ze niet overal moet herhalen. Typisch tekst-eigenschappen: color, font-family, font-size, line-height, text-align.

body {
    font-family: Arial, sans-serif;   /* alle tekst op de pagina erft dit */
    color: #333;
}

Eigenschappen zoals border, margin, padding en background worden niet geërfd (logisch: als een doos een rand krijgt, wil je niet dat elk kind ook een rand krijgt).

Met de waarde inherit dwing je overerving af, met initial zet je terug naar de standaardwaarde. Bijvoorbeeld: knoppen en invoervelden erven het lettertype standaard niet:

button, input, textarea {
    font-family: inherit;   /* neem het lettertype van de pagina over */
}
a {
    color: inherit;         /* een link krijgt de tekstkleur van zijn ouder */
}

!important: wees voorzichtig

Met !important achter een waarde win je van (bijna) alles. Het is verleidelijk, maar het maakt je CSS onbeheersbaar: het volgende probleem los je enkel op met nóg een !important.

Debuggen met DevTools

Werkt je CSS niet? Open de DevTools (F12), kies Elements, klik op het element en kijk naar het Styles-paneel:

• Regels die het verliezen staan doorgestreept: dat is de winnende regel die eroverheen gaat;
• Je ziet uit welk bestand en welke regel elke declaratie komt;
• Vinkje weg = eigenschap tijdelijk uit: zo test je snel;
• Een ⚠️ gele driehoek naast een eigenschap betekent dat de browser hem niet begrijpt (typfout?).

display: blok, inline en inline-block

De eigenschap display bepaalt hoe een element zich gedraagt in de stroom van de pagina:

position: elementen verplaatsen

Met position haal je een element uit de normale stroom of zet je het vast. Daarna schuif je het met top, right, bottom en left.

Het klassieke patroon: relative + absolute

Zo plaats je een badge of sluitknop in de hoek van een kaart: de kaart is relative (referentiepunt), de badge is absolute en schuift vanuit die hoek.

.kaart {
    position: relative;      /* referentiepunt voor de badge */
}
.badge {
    position: absolute;      /* uit de stroom, tov .kaart */
    top: 8px;
    right: 8px;
}

Vast en plakkend: fixed en sticky

header {
    position: sticky;     /* plakt bovenaan bij scrollen... */
    top: 0;               /* ...op 0px van de bovenrand */
    background: white;
    z-index: 10;          /* boven de rest van de inhoud */
}
.chat-knop {
    position: fixed;      /* altijd zichtbaar, ook bij scrollen */
    bottom: 20px;
    right: 20px;
}

Als elementen elkaar overlappen, bepaalt z-index wat bovenaan ligt: het element met het hoogste getal komt voor. Het werkt enkel bij elementen met een position anders dan static (en bij flex- en grid-kinderen).

Wat is Flexbox?

Flexbox (flexible box) is een layoutsysteem voor één richting: een rij of een kolom. Je zet display: flex op de ouder (de flex-container); de directe kinderen (de flex-items) staan dan automatisch naast elkaar en je regelt hun uitlijning met een paar eigenschappen op de container.

.rij {
    display: flex;
}

Meer is er niet nodig om drie <div>s naast elkaar te krijgen!

Twee assen: hoofdas en kruisas

Flexbox werkt met twee assen. Dit is de sleutel om het te begrijpen:

Assen in flexboxflex-direction: row  (standaard)          flex-direction: column

  hoofdas  ──────────────►                  kruisas  ──────────►
  ┌───┐ ┌───┐ ┌───┐         kruisas           ┌───┐   hoofdas
  │ 1 │ │ 2 │ │ 3 │            │              │ 1 │      │
  └───┘ └───┘ └───┘            ▼              ├───┤      │
                                              │ 2 │      ▼
                                              └───┘

• De hoofdas is de richting waarin de items staan (bij row: horizontaal). Uitlijnen langs de hoofdas doe je met justify-content.
• De kruisas staat er loodrecht op. Uitlijnen langs de kruisas doe je met align-items.

Uitlijnen: justify-content en align-items

Perfect centreren

Iets horizontaal én verticaal centreren was vroeger een nachtmerrie. Met flexbox zijn het drie regels:

.scherm {
    display: flex;
    justify-content: center;   /* horizontaal (hoofdas) */
    align-items: center;       /* verticaal (kruisas) */
    height: 100vh;
}

De items zelf: flex-grow, flex-shrink en flex-basis

Ook de kinderen kan je sturen. De verkorte eigenschap flex bepaalt hoe een item ruimte inneemt:

.item    { flex: 1; }              /* alle items delen de ruimte gelijk */
.groot   { flex: 2; }              /* dubbel zoveel ruimte als een item met flex: 1 */
.vast    { flex: 0 0 200px; }      /* niet groeien, niet krimpen, altijd 200px */
.kaart   { flex: 1 1 250px; }      /* groeien, krimpen, en begin op 250px */

Met align-self lijn je één item anders uit dan de rest, en met order wijzig je de volgorde zonder je HTML aan te passen.

Praktijk: een menubalk en kaartjes

Menubalk: logo links, links rechts, alles verticaal gecentreerd.

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
}
nav ul {
    display: flex;         /* de lijst zelf is ook een flex-container */
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

Kaartjes die naar een volgende regel gaan als er geen plaats meer is (zonder media-queries!):

.kaarten {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.kaart {
    flex: 1 1 220px;       /* minstens 220px, groeit om de regel te vullen */
}

Wat is Grid?

CSS Grid verdeelt een container in een raster van rijen en kolommen. Net als bij flexbox zet je display: grid op de ouder; de directe kinderen vallen dan in de cellen van het raster.

Kolommen maken met grid-template-columns

Met grid-template-columns geef je de breedte van elke kolom op. Handig is de eenheid fr (fractie): een deel van de beschikbare ruimte.

.raster {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;   /* drie gelijke kolommen */
    gap: 16px;                            /* ruimte tussen rijen en kolommen */
}

/* korter: */
grid-template-columns: repeat(3, 1fr);

/* zijbalk + inhoud: */
grid-template-columns: 250px 1fr;         /* 250px vast, de rest voor de inhoud */
grid-template-columns: 1fr 2fr;           /* tweede kolom is dubbel zo breed */

Rijen ontstaan vanzelf: elke keer als een rij vol zit, begint er een nieuwe. Wil je de hoogte van rijen sturen, dan gebruik je grid-auto-rows (bv. minmax(100px, auto)).

Responsieve kaartjes zonder media queries

Met repeat(auto-fit, minmax(…, 1fr)) maak je een raster dat zelf beslist hoeveel kolommen er passen. Elke kolom is minstens 200px breed en de kolommen vullen samen de rij. Wordt het venster smaller, dan verdwijnen er kolommen.

.galerij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

Elementen over meerdere cellen

Een kind kan meerdere kolommen of rijen innemen met grid-column en grid-row:

.breed { grid-column: span 2; }      /* neemt twee kolommen in */
.hoog  { grid-row: span 2; }         /* neemt twee rijen in */
.kop   { grid-column: 1 / -1; }      /* van de eerste tot de laatste kolomlijn: de volledige rij */

Een hele pagina met grid-template-areas

Met grid-template-areas teken je je pagina als ASCII-schets. Elk kind krijgt met grid-area een naam en gaat naar de juiste plek.

.pagina {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "kop     kop"
        "zijbalk inhoud"
        "voet    voet";
    min-height: 100vh;
}
header { grid-area: kop; }
aside  { grid-area: zijbalk; }
main   { grid-area: inhoud; }
footer { grid-area: voet; }

Zo lees je meteen aan de CSS hoe de pagina eruitziet. Voor een gsm-versie wijzig je in een media query enkel de grid-template-areas (zie volgend hoofdstuk).

Uitlijnen in het raster

Ook Grid kent uitlijn-eigenschappen, met dezelfde namen als bij flexbox: justify-items / align-items (cel-inhoud), justify-content / align-content (het hele raster). Met place-items: center centreer je in één regel alles in zijn cel.

Waarom responsive?

Meer dan de helft van het webverkeer komt van gsm’s. Een pagina die enkel op een groot scherm werkt, is voor die bezoekers onbruikbaar. Responsive design betekent: één website die zich aanpast aan het scherm van de bezoeker. Drie bouwstenen:

1. De viewport-meta in je HTML;
2. Flexibele maten (%, rem, max-width, flex/grid) in plaats van vaste pixels;
3. Media queries om de layout te wijzigen op bepaalde breedtes.

De viewport-meta

Zonder deze regel in je head denkt een gsm dat je pagina 980px breed is en toont hij een uitgezoomde versie. Zet ze altijd:

in de <head> van elke pagina<meta name="viewport" content="width=device-width, initial-scale=1">

Ze zegt: “gebruik de echte breedte van het toestel en zoom niet uit”.

Media queries

Een media query past CSS-regels enkel toe als een voorwaarde klopt, meestal een schermbreedte:

/* enkel op schermen tot 600px breed (gsm) */
@media (max-width: 600px) {
    .rij {
        flex-direction: column;
    }
    h1 {
        font-size: 1.75rem;
    }
}

/* enkel op schermen vanaf 900px breed */
@media (min-width: 900px) {
    .container {
        width: 80%;
    }
}

• max-width: 600px: geldt tot en met 600px breed;
• min-width: 900px: geldt vanaf 900px breed;
• Binnen de accolades van de query staan gewone CSS-regels, met hun eigen selectors.

Mobile first

De beste aanpak is mobile first: schrijf eerst de opmaak voor de kleinste schermen (zonder media query) en voeg met min-width verbeteringen toe voor grotere schermen.

/* basis: gsm — één kolom */
.kaarten {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

/* tablet: twee kolommen */
@media (min-width: 600px) {
    .kaarten { grid-template-columns: repeat(2, 1fr); }
}

/* desktop: vier kolommen */
@media (min-width: 1000px) {
    .kaarten { grid-template-columns: repeat(4, 1fr); }
}

Handige extra’s

Menu verbergen op een gsm en een menu-knop tonen (met JavaScript eronder):

.menu-knop { display: none; }              /* op groot scherm niet nodig */

@media (max-width: 700px) {
    .menu-knop { display: block; }
    nav ul     { display: none; }          /* menu verborgen tot je op de knop klikt */
    nav ul.open { display: block; }        /* JavaScript zet de klasse 'open' aan */
}

Donkere modus: volg de voorkeur van de gebruiker:

@media (prefers-color-scheme: dark) {
    body {
        background: #0f172a;
        color: #e2e8f0;
    }
}

Ook afdrukken kan je aanpassen met @media print (bv. menu’s verbergen). Test altijd op een echt toestel of met de toestelmodus in de DevTools (F12 → icoon met gsm en tablet).

Transities: zacht veranderen

Normaal springt een eigenschap meteen naar zijn nieuwe waarde (een knop wordt in één klap rood bij hover). Met een transitie gebeurt de verandering geleidelijk. Je zet de transitie op het element in zijn gewone toestand, de nieuwe waarde zet je in de hover-regel:

.knop {
    background-color: #2563eb;
    transition: background-color 0.3s ease;   /* wat, hoe lang, hoe */
}
.knop:hover {
    background-color: #1d4ed8;
}

Transform: verschuiven, schalen, draaien

Met transform verplaats je een element zonder de rest van de pagina te beïnvloeden:

Combineer ze met een transitie voor de klassieke “kaart die opveert bij hover”:

.kaart {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kaart:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Animaties met @keyframes

Een transitie gaat van A naar B als er iets gebeurt (hover). Een animatie beweegt uit zichzelf en kan meerdere stappen hebben. In twee stappen:

1. Definieer de animatie met @keyframes en geef ze een naam:

@keyframes pulseer {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

2. Pas ze toe met de eigenschap animation: naam, duur, tempo, aantal herhalingen.

.hartje {
    animation: pulseer 1s ease-in-out infinite;   /* naam duur tempo herhaling */
}

Met from en to (of percentages) beschrijf je de stappen. infinite herhaalt eindeloos; een getal (3) herhaalt zo vaak.

Een laadicoon

@keyframes draai {
    to { transform: rotate(360deg); }
}
.laden {
    width: 40px;
    height: 40px;
    border: 4px solid #cbd5e1;
    border-top-color: #2563eb;      /* één gekleurde kant */
    border-radius: 50%;
    animation: draai 0.8s linear infinite;
}

Met mate: toegankelijkheid en prestaties

• Overdrijf niet. Animaties die de aandacht opeisen vermoeien en leiden af. Kort (0,2 tot 0,4 seconden) en subtiel werkt het best.
• Sommige mensen worden onwel van bewegende beelden. Respecteer hun instelling:

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

Dit is een van de zeldzame plaatsen waar !important verdedigbaar is.

Het probleem: herhaling

Stel: de hoofdkleur van je site is #2563eb en je gebruikt ze op 30 plaatsen. Wil je morgen een andere kleur, dan moet je 30 keer zoeken en vervangen. Ook lastig: welke blauwtint was het ook alweer?

De oplossing zijn CSS-variabelen (officieel custom properties): je definieert een waarde één keer en gebruikt ze overal.

Variabelen maken en gebruiken

Een variabele begint met twee streepjes. Je zet ze meestal in :root (het hoogste element, zodat ze overal beschikbaar zijn) en gebruikt ze met var():

:root {
    --kleur-primair: #2563eb;
    --kleur-tekst: #1e293b;
    --kleur-achtergrond: #f8fafc;
    --ruimte: 16px;
    --straal: 8px;
}

body {
    color: var(--kleur-tekst);
    background-color: var(--kleur-achtergrond);
}

.knop {
    background-color: var(--kleur-primair);
    padding: var(--ruimte);
    border-radius: var(--straal);
}

• Namen zijn vrij te kiezen maar beginnen met --; kies een duidelijke naam (hoofdlettergevoelig).
• var(--naam, reserve) laat je een reservewaarde opgeven voor als de variabele niet bestaat.
• Variabelen kunnen ook binnen een selector staan en gelden dan enkel daar.

Thema’s: een donkere modus met variabelen

Omdat variabelen overschreven kunnen worden, zijn ze ideaal voor thema’s. Je gebruikt overal var(...) en wisselt enkel de waarden:

:root {
    --achtergrond: #ffffff;
    --tekst: #0f172a;
}

.donker {
    --achtergrond: #0f172a;
    --tekst: #e2e8f0;
}

body {
    background: var(--achtergrond);
    color: var(--tekst);
}

Zet je met JavaScript de klasse donker op de <body>, dan wisselen alle kleuren in één keer. Ook Bootstrap 5 werkt zo achter de schermen.

Een reset: gelijke startpunten

Elke browser heeft eigen standaardstijlen (marges op body, grootte van koppen, …). Veel ontwikkelaars beginnen hun stylesheet met een korte reset zodat alles overal hetzelfde start:

bovenaan stijl.css*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

Een stylesheet organiseren

Een stylesheet groeit snel. Geef het een vaste volgorde, van algemeen naar specifiek, en zet commentaarkoppen:

stijl.css/* 1. Variabelen */
:root { … }

/* 2. Reset en basis */
*, *::before, *::after { … }
body { … }
h1, h2, h3 { … }

/* 3. Layout */
.container { … }
.kop { … }
.voet { … }

/* 4. Componenten */
.knop { … }
.kaart { … }

/* 5. Hulpklassen */
.verborgen { display: none; }

/* 6. Media queries (onderaan, of bij hun component) */
@media (max-width: 600px) { … }

Goede gewoontes

• Gebruik klassen, geen id’s, om op te maken: dat blijft flexibel en overschrijfbaar.
• Beschrijvende namen die zeggen wat iets is, niet hoe het eruitziet: .waarschuwing in plaats van .rode-tekst.
• Kies één naamconventie: kleine letters met streepjes (.product-kaart). Voor grotere projecten bestaat BEM: .kaart, .kaart__titel, .kaart--groot.
• Herhaal je jezelf? Maak een variabele of een gedeelde klasse.
• Verdeel grote projecten in meerdere bestanden (reset.css, layout.css, componenten.css) of gebruik een tool zoals Sass.

De opdracht

Onderaan vind je de HTML van een portfolio: een menubalk, een introductieblok, een galerij projectkaarten en een voet. Jij schrijft de volledige CSS. Doel: een verzorgde, responsieve pagina.

Eisen:

• Variabelen in :root voor je kleuren (--primair, --tekst, --achtergrond) en gebruik ze;
• een reset met box-sizing: border-box en een leesbaar body (lettertype, regelafstand);
• een menubalk met flexbox (logo links, links rechts, verticaal gecentreerd, plakkend bovenaan);
• een hero met kleurverloop, gecentreerde witte tekst en een knop met hover-effect en transitie;
• een kaartengalerij met grid dat automatisch het aantal kolommen kiest, kaarten met schaduw en een opveer-effect bij hover;
• een media query die de menubalk op een gsm (max. 600px) onder elkaar zet.

Werkwijze

1. Begin met de variabelen en de reset.
2. Bouw dan van boven naar onder: menubalk → hero → kaarten → voet.
3. Bekijk na elk onderdeel het ▶ Voorbeeld en klik op Controleer.
4. Test op een smal venster of in de toestelmodus van de DevTools.
5. Controleer of de contrast van je kleuren voldoende is.

Mogelijke uitwerking

Probeer eerst zelf! Zit je vast, dan zie je hier één van de vele mogelijke oplossingen:

css/stijl.css/* ---------- Variabelen ---------- */
:root {
    --primair: #2563eb;
    --tekst: #1e293b;
    --achtergrond: #f8fafc;
    --straal: 10px;
}

/* ---------- Reset en basis ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: var(--tekst);
    background-color: var(--achtergrond);
}

/* ---------- Menubalk ---------- */
.kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.kop nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.kop a {
    color: var(--tekst);
    text-decoration: none;
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(to right, var(--primair), #8b5cf6);
    color: white;
    text-align: center;
    padding: 60px 20px;
}

.knop {
    display: inline-block;
    background-color: white;
    color: var(--primair);
    padding: 12px 24px;
    border-radius: var(--straal);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.knop:hover {
    transform: translateY(-2px);
}

/* ---------- Kaarten ---------- */
.kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 24px;
}

.kaart {
    background-color: white;
    padding: 20px;
    border-radius: var(--straal);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.kaart:hover {
    transform: translateY(-4px);
}

/* ---------- Voet ---------- */
.voet {
    text-align: center;
    padding: 20px;
}

/* ---------- Gsm ---------- */
@media (max-width: 600px) {
    .kop {
        flex-direction: column;
        gap: 8px;
    }
}

Wat nu?

Gefeliciteerd: je kan nu een volledige website opmaken. Enkele mogelijke vervolgstappen:

• Bootstrap: een kant-en-klaar raamwerk dat veel van dit werk voor je doet;
• JavaScript en jQuery: je pagina reageert op klikken, zoals een uitklapbaar menu;
• Sass en Tailwind CSS: hulpmiddelen voor grote projecten;
• Oefenen: bouw na wat je op het web mooi vindt, bv. de homepage van een bekend merk.