Skip to main content

Les 3 – Tekst opmaken met CSS

Wat ga je leren?​

Je leert wat CSS is en hoe je de kleur, grootte en het lettertype van tekst aanpast. Dit is de eerste les waarin je de style.css tab gebruikt.

Theorie​

CSS staat voor Cascading Style Sheets. Met CSS bepaal je hoe HTML eruitziet: kleuren, lettertypen, groottes en meer.

Je schrijft CSS in een apart bestand (style.css) en koppelt het aan je HTML met een <link> tag in de <head>:

<link rel="stylesheet" href="style.css">

Een CSS-regel ziet er zo uit:

h1 {
  color: darkblue;
  font-size: 2rem;
}
  • h1 is de selector — welk element wordt gestijld
  • color en font-size zijn eigenschappen
  • darkblue en 2rem zijn de waarden

Handige eigenschappen voor tekst​

EigenschapWat het doetVoorbeeld
colorTekstkleurcolor: red;
font-sizeTekstgroottefont-size: 1.5rem;
font-familyLettertypefont-family: Arial;

Predict​

Wat denk je dat er verandert als je color: darkblue verwijdert uit de CSS?

Klik hier voor het antwoord

De kop krijgt zijn standaardkleur terug — in de meeste browsers is dat zwart. Zonder een color eigenschap gebruikt de browser de standaardstijl.

Probeer het zelf!​

Let op: de CSS schrijf je in de style.css tab!

Editor laden...

Investigate​

Experimenteer met de CSS:

  • Wat gebeurt er als je color: darkblue verandert in color: tomato?
  • Probeer font-size: 3rem — wat verandert er?
  • Wat doet font-family: Georgia?

Modify​

Opdracht: Verander de stijl zodat de kop rood is en de paragraaftekst groter is (1.5rem).

Tip

Pas de waarden aan in de style.css tab. Verander color: bij h1 en font-size: bij p.

Antwoord
h1 {
  color: red;
  font-size: 2rem;
}

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

Make​

Opdracht: Schrijf een kort gedicht of een quote met een titel. Gebruik CSS om de kop een andere kleur en groter lettertype te geven, en de paragraaftekst een eigen stijl.

Tip

Je navigeert naar de style.css tab en selecteert het element met de HTML-tag naam (bijv. h1 en p).

Antwoord
<!-- HTML -->
<h1>Mijn favoriete quote</h1>
<p>Waar een wil is, is een weg.</p>
/* CSS */
h1 {
  color: purple;
  font-size: 2.5rem;
}

p {
  color: darkgreen;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
}

Er gaat iets mis​

<link> tag vergeten

Als je de CSS schrijft maar de <link> tag vergeet in de HTML, zie je geen enkel verschil in de preview. De browser laadt de CSS gewoon niet.

Controleer altijd of je dit in de <head> hebt staan:

<link rel="stylesheet" href="style.css">