CSS
HTML geeft je pagina structuur. CSS (Cascading Style Sheets) geeft het uiterlijk. Kleur, lettertype, grootte, ruimte, layout — alles wat je ziet wordt bepaald door CSS. Zonder CSS is een website een blanco tekstdocument met blauwe links. Met CSS wordt het een ervaring.
CSS toevoegen aan je pagina
Er zijn drie manieren om CSS toe te voegen. Voor kleine projecten is een apart .css-bestand het meest overzichtelijk.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Mijn website</title>
<!-- Externe stylesheet: aanbevolen voor echte projecten -->
<link rel="stylesheet" href="stijlen.css" />
</head>
<body>
<h1>Welkom!</h1>
</body>
</html>
Selectors: op welk element pas je de stijl toe?
Een CSS-regel bestaat uit een selector en een declaratieblok:
selector {
eigenschap: waarde;
}
Elementselectors
Past de stijl toe op alle elementen van dat type:
h1 {
color: #1a1a2e;
font-size: 2rem;
}
p {
line-height: 1.6;
color: #444;
}
Klasse-selectors
Met een punt (.) selecteer je elementen met een bepaalde class. Dit is de meest gebruikte selector in de praktijk:
.knop {
background-color: #0070f3;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 4px;
}
.knop--gevaarlijk {
background-color: #e53e3e;
}
<button class="knop">Opslaan</button>
<button class="knop knop--gevaarlijk">Verwijderen</button>
ID-selectors
Met een hekje (#) selecteer je één specifiek element. Gebruik spaarzaam — een ID mag slechts één keer per pagina voorkomen.
#hoofdnavigatie {
position: sticky;
top: 0;
background: white;
}
In de praktijk gebruiken de meeste developers bijna uitsluitend klassen voor styling. ID's zijn specifieker in de cascade (zie hieronder) en lastiger te overschrijven. Bewaar id voor JavaScript-hooks en ankerlinks.
Het boxmodel
Elk HTML-element is in de browser een rechthoekig blok. Dit blok bestaat uit vier lagen, van binnen naar buiten:
┌─────────────────────────────┐
│ margin │ ← ruimte buiten het element
│ ┌───────────────────────┐ │
│ │ border │ │ ← de rand
│ │ ┌─────────────────┐ │ │
│ │ │ padding │ │ │ ← ruimte tussen rand en inhoud
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │ ← de tekst of afbeelding
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘
.kaart {
/* Binnenruimte (tussen rand en inhoud) */
padding: 1.5rem;
/* Rand */
border: 1px solid #e2e8f0;
border-radius: 8px;
/* Buitenruimte (tussen dit element en het volgende) */
margin-bottom: 1rem;
}
Standaard telt de browser padding en border extra op bij de opgegeven breedte. Dat is verwarrend. Voeg dit altijd toe aan het begin van je stylesheet:
*,
*::before,
*::after {
box-sizing: border-box;
}
Nu geldt: width: 300px betekent dat het volledige blok (inclusief padding en border) 300px breed is.
Flexbox: moderne layout
Flexbox is de meest gebruikte manier om elementen naast of onder elkaar te plaatsen. Je stelt het in op de ouder van de elementen die je wilt rangschikken.
.container {
display: flex;
gap: 1rem;
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
De drie items staan nu naast elkaar, met 1rem tussenruimte.
Veelgebruikte flexbox-eigenschappen
.container {
display: flex;
/* Richting: rij (standaard) of kolom */
flex-direction: row; /* of: column */
/* Uitlijning langs de hoofdas */
justify-content: space-between; /* of: center, flex-start, flex-end */
/* Uitlijning langs de dwarsas */
align-items: center; /* of: flex-start, flex-end, stretch */
/* Inpakken als er te weinig ruimte is */
flex-wrap: wrap;
/* Ruimte tussen items */
gap: 1rem;
}
Praktijkvoorbeeld: navigatiebalk
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #1a1a2e;
}
.nav-logo {
color: white;
font-size: 1.25rem;
font-weight: bold;
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: #ccc;
text-decoration: none;
}
.nav-links a:hover {
color: white;
}
De cascade en specificiteit
De "C" in CSS staat voor Cascading — waterval. Wanneer meerdere regels hetzelfde element stijlen, wint de meest specifieke regel. En bij gelijke specificiteit wint de regel die het latest in het bestand staat.
p {
color: black; /* minder specifiek */
}
.intro p {
color: #0070f3; /* specifieker: klasse + element → wint */
}
Een snelle vuistregel voor specificiteit (van laag naar hoog):
- Elementselector (
p,h1,div) - Klasse-selector (
.knop) - ID-selector (
#header) - Inline stijl (
style="...")
Alles samengebracht
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>CSS voorbeeld</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
margin: 0;
background: #f8fafc;
color: #1a1a2e;
}
.pagina {
max-width: 720px;
margin: 0 auto;
padding: 2rem;
}
.kaarten {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.kaart {
flex: 1 1 200px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
}
.kaart h2 {
margin-top: 0;
font-size: 1.1rem;
}
.kaart p {
color: #555;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="pagina">
<h1>Onze diensten</h1>
<div class="kaarten">
<div class="kaart">
<h2>Webdesign</h2>
<p>Mooie, gebruiksvriendelijke interfaces op maat.</p>
</div>
<div class="kaart">
<h2>Development</h2>
<p>Schaalbare webapplicaties met moderne technologieën.</p>
</div>
<div class="kaart">
<h2>Hosting</h2>
<p>Betrouwbare en snelle hosting voor jouw project.</p>
</div>
</div>
</div>
</body>
</html>
CSS is eindeloos uitgebreid — animaties, CSS Grid, variabelen, media queries voor responsive design. De concepten in dit hoofdstuk vormen de basis die je nodig hebt om alle verdere technieken te begrijpen.