CSS Les 1: Wat is CSS?

Home ›CSS-track ›Les 1

🎨 Wat is CSS en hoe koppel je het

⏱ Geschatte leestijd: 25 minuten · 7 stappen

HTML bepaalt de structuur van een pagina — wat er staat. CSS (Cascading Style Sheets) bepaalt de verschijning — hoe het eruitziet. Kleur, lettertype, witruimte, lay-out: allemaal CSS. In deze les leer je hoe CSS werkt, op welke drie manieren je het aan HTML koppelt, en schrijf je je eerste CSS-regels.

1 Wat is CSS?

Wat betekent dit?

CSS staat voor Cascading Style Sheets. Het is een taal die beschrijft hoe HTML-elementen op het scherm moeten worden weergegeven. "Cascading" betekent dat stijlregels van boven naar beneden doorlopen — een latere regel kan een eerdere overschrijven.

Bekijk het verschil tussen dezelfde HTML-pagina zonder en met CSS:

Zonder CSS — saai

Met CSS — met karakter

Beide pagina's hebben exact dezelfde HTML. Alleen de CSS verschilt. Dat is het principe achter CSS: structuur en opmaak zijn volledig gescheiden.

💡 Vereiste kennis: Je hebt de HTML-track gevolgd (of vergelijkbare kennis). Je kent tags als <h1>, <p>, <div> en de structuur van een <head>. CSS-kennis is niet nodig — we beginnen helemaal opnieuw.

2 Manier 1: Inline style

De snelste manier: voeg een style-attribuut direct toe aan een HTML-element. De CSS-regels staan dan letterlijk in de HTML-tag.

Inline style — direct op het element

<h1 style="color: teal; font-size: 2rem;">Mijn kop</h1>
<p style="color: gray; font-family: Arial;">Een paragraaf.</p>
<p style="color: gray; font-family: Arial;">Nog een paragraaf.</p>

❌ Waarom je dit bijna nooit wilt:

Bij 50 paragrafen moet je 50 keer hetzelfde attribuut aanpassen.
De HTML wordt onoverzichtelijk — structuur en opmaak zijn door elkaar.
Er is geen hergebruik: je kunt de stijl niet makkelijk op andere elementen toepassen.

Wanneer gebruik je het wel?

Voor een razendsnelle test, of als JavaScript dynamisch een stijl op een element zet. In alle andere gevallen: gebruik een van de twee betere manieren hieronder.

3 Manier 2: Intern stylesheet

Beter: verzamel alle CSS in een <style>-blok in de <head> van je HTML-bestand. Zo staat alle opmaak op één plek, apart van de inhoud.

Intern stylesheet — CSS in de <head>

<!DOCTYPE html>
<html>
<head>
  <title>Mijn pagina</title>
  <style>
    h1 {
      color: teal;
      font-size: 2rem;
    }
    p {
      color: gray;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Mijn kop</h1>
  <p>Een paragraaf.</p>
  <p>Nog een paragraaf.</p>
</body>
</html>

Beide <p>-elementen krijgen nu automatisch dezelfde stijl — je hoeft niet elke tag apart aan te passen. Dat is al een grote verbetering.

👍 Beter dan inline — maar nog een beperking: als je 10 HTML-pagina's hebt, moet je de stijlen in elk bestand apart beheren. Goed voor kleine oefeningen en prototypes.

4 Manier 3: Extern stylesheet (de beste aanpak)

Maak een apart .css-bestand en koppel het met een <link>-tag. Alle pagina's van je website kunnen hetzelfde CSS-bestand gebruiken.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Mijn pagina</title>
  <link rel="stylesheet"
        href="stijl.css">
</head>
<body>
  <h1>Hallo!</h1>
  <p>Tekst.</p>
</body>
</html>

stijl.css

h1 {
  color: teal;
  font-size: 2rem;
}

p {
  color: gray;
  font-family: Arial, sans-serif;
}

Manier	Hergebruik	Overzicht	Gebruik wanneer
Inline	✗	✗	Snelle test, JS-stijl
Intern	~	✓	Oefeningen, één pagina
Extern ⭐	✓	✓	Altijd — echte projecten

📝 In deze track schrijven we oefeningen met een intern stylesheet (<style>-blok), zodat je niet twee bestanden tegelijk beheert in de editor. In echte projecten gebruik je altijd een extern .css-bestand.

5 Basis CSS-syntax en comments

Elke CSS-regel heeft dezelfde anatomie: een selector, accolades, en daarbinnen een of meer declaraties.

selector

{

color: teal;

font-size: 2rem;

}

↑ selector — welk element ↑ property — wat je aanpast ↑ value — de nieuwe waarde

Selector

Welk HTML-element je wilt stijlen. Bijv. h1, p, .klasse, #id. Meer hierover in les 2.

Property

Wat je wilt aanpassen. Bijv. color, font-size, background-color, margin.

Value

De nieuwe waarde. Bijv. teal, 16px, #ff0000, bold, center.

Comments in CSS

Een comment is tekst die de browser volledig negeert. Je gebruikt het om code te beschrijven of tijdelijk uit te schakelen:

Comments in CSS — beginnen met /* en eindigen met */

/* Dit is een comment — de browser negeert dit volledig */

h1 {
  color: teal;      /* De kleur van de kop */
  font-size: 2rem;  /* 2× de standaard lettergrootte */
}

/* Tijdelijk uitgeschakeld:
p {
  color: red;
}
*/

Wat betekent dit?

CSS-comments beginnen altijd met /* en eindigen met */. Alles daartussen wordt genegeerd, ook als het meerdere regels beslaat. In HTML gebruik je ; in CSS gebruik je altijd /* */.

6 Oefening 1: Schrijf je eerste CSS

Opdracht:

De HTML staat klaar. Schrijf CSS in het <style>-blok:

✓ body krijgt een background-color

✓ h1 krijgt een color

✓ h1 krijgt een font-size

✓ p krijgt een font-family

editor — pas alleen de CSS aan

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Mijn eerste CSS</title>
  <style>
    /* Schrijf hier je CSS */

  </style>
</head>
<body>
  <h1>Welkom bij mijn pagina</h1>
  <p>CSS maakt het web mooi.</p>
  <p>Elke website gebruikt het.</p>
</body>
</html>

Live preview — verandert terwijl je typt

7 Oefening 2: Comments en drie selectors

Opdracht:

Schrijf CSS die de pagina stijlt, en voeg een comment toe die uitlegt wat je doet.

✓ Minstens één CSS-comment (/* jouw uitleg */)

✓ Een stijlregel voor body

✓ Een stijlregel voor h1

✓ Een stijlregel voor p

editor — pas alleen de CSS aan

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>CSS met comments</title>
  <style>
    /* Schrijf hier CSS — voeg ook een comment toe */

  </style>
</head>
<body>
  <h1>CSS leren</h1>
  <p>Ik schrijf mijn eerste CSS-regels.</p>
  <p>Comments helpen om code te begrijpen.</p>
</body>
</html>

Live preview

Kennischeck

4 vragen — test je begrip van deze les.

← Alle tracks Les 2: Selectors →