Je HTML-pagina's werken, maar ze zien er nog uit als een tekstdocument uit de jaren negentig. CSS (Cascading Style Sheets) is de taal waarmee je kleuren, lettertypes, marges en meer toevoegt. In deze les leer je de basisprincipes — genoeg om je portfolio-pagina al stukken beter te laten lijken.
1
CSS koppelen met <link>
Wat betekent dit?
Je kunt CSS op drie manieren toevoegen: inline (attribuut style="..."), in een <style>-blok in de <head>, of als apart bestand via <link>. Een apart bestand is de beste aanpak voor echte projecten — je kunt het hergebruiken voor alle pagina's.
<!-- In de <head> van je HTML -->
<link rel="stylesheet" href="stijl.css"><head>
<style>
h1 {
color: blue;
}
</style>
</head>
💡 In deze les schrijven we de CSS direct in een <style>-blok in de <head> — dan hoef je niet twee bestanden tegelijk te beheren. In grotere projecten maak je altijd een apart .css-bestand.
2 Selectors en declaraties
Een CSS-regel bestaat uit een selector (wat je wilt stijlen) en een of meer declaraties (hoe het eruit moet zien). Elke declaratie is een eigenschap met een waarde, gescheiden door een dubbele punt en afgesloten met een puntkomma.
/* selector { eigenschap: waarde; } */
h1 {
color: darkblue;
font-size: 32px;
}
p {
color: #444444;
font-size: 16px;
}
/* Klasse-selector: begint met een punt */
.uitgelicht {
background-color: yellow;
}
/* ID-selector: begint met een hekje */
#intro {
font-size: 18px;
}Tag-selector
Stijlt alle elementen van dat type. Bijv. h1 stijlt elke h1.
Klasse-selector
Stijlt elementen met class="naam". Gebruik je met een punt: .naam.
ID-selector
Stijlt het element met id="naam". Gebruik je met een hekje: #naam. Elk ID is uniek.
3 Kleuren en lettertypes
body {
background-color: #f5f5f5; /* lichtgrijs */
color: #333333; /* donkergrijs voor tekst */
font-family: Arial, sans-serif;
}
h1 {
color: #e55a00; /* oranje */
font-size: 2rem; /* 2× de basisgrootte */
font-weight: bold;
}
a {
color: #0066cc;
text-decoration: none; /* haal de onderstreping weg */
}
a:hover {
text-decoration: underline; /* onderstreping terug bij hover */
}Kleurnotaties
red — kleurwoord
#ff6600 — hex (rood+groen+blauw)
rgb(255, 102, 0) — rgb-waarden
Eenheden voor grootte
px — vaste pixels
rem — relatief aan root (aanbevolen)
% — percentage van ouder-element
4
Ruimte: padding en margin
Wat betekent dit?
Elk HTML-element is een "box". De ruimte binnen de box (tussen inhoud en rand) is padding. De ruimte buiten de box (tussen de rand en andere elementen) is margin.
/* Padding aan alle kanten */
p {
padding: 16px;
}
/* Padding per kant */
p {
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
}
/* Margin */
h1 {
margin-bottom: 24px; /* ruimte onder de kop */
}
/* Blok centreren met margin: auto */
.container {
width: 800px;
margin: 0 auto; /* links en rechts gelijk → gecentreerd */
}5 Oefening 1: Stijl je eerste pagina
Opdracht:
Voeg CSS toe aan de pagina zodat ze er niet meer uit ziet als een saai tekstdocument.
✓ body heeft een background-color
✓ h1 heeft een color
✓ Een element heeft padding
✓ Een element heeft font-size
6 Oefening 2: Klasse-selector
Opdracht:
Maak een klasse .kaart die een witte achtergrond, padding, een border en afgeronde hoeken geeft. Gebruik de klasse op minstens 2 elementen.
✓ CSS-klasse .kaart aanwezig
✓ background-color in de klasse
✓ padding in de klasse
✓ border of border-radius in de klasse
✓ Minstens 2 HTML-elementen gebruiken class="kaart"
7 Eindopdracht: Gestijlde portfolio-pagina
Geef je portfolio-pagina uit les 5 een visuele make-over:
✓ body: achtergrondkleur + lettertype
✓ header: achtergrondkleur + padding + tekstkleur
✓ nav a: kleur + geen onderstreping
✓ main: maximale breedte (max-width) + gecentreerd (margin: 0 auto)
✓ Minstens één klasse-selector met padding en border-radius
✓ footer: achtergrondkleur + gecentreerde tekst
🎉
HTML-track voltooid!
Je kent nu HTML, semantische structuur, formulieren, tabellen en de basis van CSS. Je kunt echte webpagina's bouwen. Klaar voor de volgende stap?
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Portfolio — Jouw Naam</title>
<style>
body {
background-color: #f0f4f8;
font-family: Arial, sans-serif;
margin: 0;
color: #333;
}
header {
background-color: #1a202c;
color: white;
padding: 24px 32px;
}
header h1 {
margin: 0 0 8px 0;
font-size: 2rem;
}
nav a {
color: #f6ad55;
text-decoration: none;
margin-right: 16px;
}
nav a:hover {
text-decoration: underline;
}
main {
max-width: 800px;
margin: 32px auto;
padding: 0 16px;
}
section {
margin-bottom: 40px;
}
h2 {
color: #2d3748;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 8px;
}
article {
background-color: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
border: 1px solid #e2e8f0;
}
article h3 {
margin: 0 0 8px 0;
color: #e55a00;
}
footer {
background-color: #1a202c;
color: #718096;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<header>
<h1>Jouw Naam</h1>
<nav>
<a href="#over">Over mij</a>
<a href="#projecten">Projecten</a>
</nav>
</header>
<main>
<section id="over">
<h2>Over mij</h2>
<p>Ik ben een MBO Software Developer student...</p>
</section>
<section id="projecten">
<h2>Projecten</h2>
<article>
<h3>HTML Portfolio</h3>
<p>Mijn eerste volledig opgemaakte webpagina.</p>
</article>
</section>
</main>
<footer>
<p>© 2026 Jouw Naam</p>
</footer>
</body>
</html>Wil je CSS écht leren?
Deze les was een snelle intro. De CSS-track gaat veel verder: selectors, het box model, flexbox, grid, responsive design, animaties en meer — verspreid over 12 lessen met live-preview bij elke oefening.
Begin de CSS-track →