Wat is CSS? Stijlen toevoegen aan je website

CSS, voluit Cascading Style Sheets, is de taal waarmee je de opmaak van een webpagina bepaalt. Wat is CSS precies? Het is een stylesheet-taal die de browser vertelt hoe jouw HTML er visueel uit moet zien: welke kleuren, lettertypen, groottes en lay-outs je gebruikt. Waar HTML de structuur geeft, zorgt CSS voor het webdesign. Zonder CSS is een website een blanco tekstdocument met blauwe links. Met CSS wordt het een echte, aantrekkelijke webpagina. Elke stylesheet die je schrijft, vertelt de browser precies hoe jouw pagina er moet uitzien: van de kleur van een knop tot de indeling van een heel scherm.

CSS toevoegen aan je pagina

Er zijn drie manieren om CSS toe te voegen aan een HTML-pagina.

Methode 1: Externe stylesheet (aanbevolen)

Je maakt een apart .css-bestand en koppelt dat aan je HTML via een <link rel="stylesheet">-tag. Dit is de meest overzichtelijke aanpak voor echte projecten.

index.html
<!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>

Methode 2: `<style>`-tag in de `<head>`

Je schrijft de CSS direct in je HTML-bestand, tussen <style>-tags. Handig voor kleine experimenten, maar minder overzichtelijk bij grotere projecten.

index.html
<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="UTF-8" />
        <title>Mijn website</title>
        <style>
            h1 {
                color: #1a1a2e;
            }
        </style>
    </head>
    <body>
        <h1>Welkom!</h1>
    </body>
</html>

Methode 3: Inline stijl

Je schrijft de CSS direct op een HTML-element met het style-attribuut. Gebruik dit zo min mogelijk: het is moeilijk te onderhouden en overschrijft andere stijlen.

index.html
<h1 style="color: red;">Welkom!</h1>

Vergeet de koppeling niet

Gebruik je een externe stylesheet, dan moet je de <link>-tag in je HTML hebben. Vergeet je die, dan laadt de browser je stylesheet nooit. Dat is een van de meest gemaakte beginnerfouten: je vraagt je dan af waarom je stijlen het niet doen.

Selectors: op welk element pas je de stijl toe?

Een CSS-regel bestaat uit een selector en een declaratieblok:

opbouw CSS-regel
selector {
    eigenschap: waarde;
}

Elementselectors

Past de stijl toe op alle elementen van dat type:

stijlen.css
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:

stijlen.css
.knop {
    background-color: #0070f3;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
}

.knop--gevaarlijk {
    background-color: #e53e3e;
}

index.html
<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.

stijlen.css
#hoofdnavigatie {
    position: sticky;
    top: 0;
    background: white;
}

Selector	Schrijfwijze	Wanneer gebruiken?
Element	`p { }`	Basisstijlen voor alle elementen van dat type
Klasse	`.knop { }`	Herbruikbare stijlen: gebruik dit het meest
ID	`#header { }`	Unieke elementen; gebruik spaarzaam

Klassen boven ID's

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
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

stijlen.css
.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;
}

box-sizing: border-box

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.

stijlen.css
.container {
    display: flex;
    gap: 1rem;
}

index.html
<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

stijlen.css
.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

stijlen.css
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, wat "waterval" betekent. Wanneer meerdere regels hetzelfde element stijlen, wint de meest specifieke regel. En bij gelijke specificiteit wint de regel die het laatste in het bestand staat.

Denk aan kledingregels op school: de directeur (inline stijl) heeft altijd het laatste woord, daarna de klassenleraar (ID), dan de schoolregels (klasse), en als laatste de algemene wet (element).

stijlen.css
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

index.html
<!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.

Verder lezen

Volgende stappen

Je kent nu de basisprincipes van CSS: selectors, het boxmodel, flexbox en de cascade. In de volgende hoofdstukken ga je dieper in op:

Responsive design: je website laten werken op elk schermformaat met media queries
CSS Grid: complexe rasterlay-outs bouwen
JavaScript: gedrag en interactiviteit toevoegen aan je pagina

CSS toevoegen aan je pagina​

Methode 1: Externe stylesheet (aanbevolen)​

Methode 2: <style>-tag in de <head>​

Methode 3: Inline stijl​

Selectors: op welk element pas je de stijl toe?​

Elementselectors​

Klasse-selectors​

ID-selectors​

Het boxmodel​

Flexbox: moderne layout​

Veelgebruikte flexbox-eigenschappen​

Praktijkvoorbeeld: navigatiebalk​

De cascade en specificiteit​

Alles samengebracht​

Verder lezen​

Volgende stappen​