Tekst opmaken met CSS

Wat ga je leren?

CSS bepaalt hoe je HTML eruitziet. Je past hier de kleur, de grootte en het lettertype van tekst aan, en gebruikt voor het eerst de style.css-tab.

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">

Let op

<link> is geen klikbare link voor de bezoeker — het koppelt alleen je CSS-bestand aan de pagina. Klikbare links (waar je echt naartoe kunt) leer je in Pagina's koppelen.

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

Wat is rem?

2rem betekent "2 keer de basisgrootte van de pagina" — meestal 32px. Het volledige verschil tussen px, rem, em en % leer je in Eenheden in CSS. Voor nu: weet dat hogere waarden grotere tekst geven.

Notities in je CSS: comments

Net als in HTML kun je in CSS notities maken die niet zichtbaar zijn op de pagina. Een CSS-comment staat tussen /* en */:

/* Dit is een comment in CSS. Handig om jezelf te herinneren wat een regel doet. */
h1 {
  color: red;
}

Handige eigenschappen voor tekst

Eigenschap	Wat het doet	Voorbeeld
color	Tekstkleur	color: red;
font-size	Tekstgrootte	font-size: 1.5rem;
font-family	Lettertype	font-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 en onderzoek

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

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander color: darkblue in color: tomato. Wat gebeurt er?
   Antwoord

   De kop wordt oranjerood. De alinea's blijven grijs, want deze regel staat alleen bij h1.
2. Verander bij h1 de font-size van 2rem naar 3rem. Wat verandert er?
   Antwoord

   De kop wordt anderhalf keer zo groot: van 32 naar 48 pixels. 1rem is 16 pixels, dus 3rem is drie keer zo groot als gewone tekst.
3. Verander bij p de waarde Arial, sans-serif in Georgia. Wat doet dat?
   Antwoord

   De alinea's krijgen een ander lettertype, met kleine streepjes aan de uiteinden van de letters, net als de kop. Arial heeft die streepjes niet, Georgia wel.

Editor laden...

Modify

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

Editor laden...

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.

Editor laden...

Tip

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

Antwoord

<h1>Mijn favoriete quote</h1>
<p>Waar een wil is, is een weg.</p>

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

Schrijf je CSS maar vergeet je de <link>-tag in de HTML, dan verandert er niets in de preview. De browser weet dan niet dat dat bestand bestaat en laadt het niet.

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

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