CSS-handleiding - Les 3 - Eigenschappen background-color, font-style, font-weight, text-align, text-decoration, text-transform.

10/10/2025, by Ivan

In de loop van de tijd zijn er veel HTML-tags bedacht, maar met de komst van CSS moesten we van sommige afscheid nemen, zoals de tags , , en <center>. Later bekijken we nog andere “verboden” tags. De eigenschappen die we in deze les behandelen helpen je om overbodige code uit de HTML te halen en deze in CSS-bestanden onder te brengen.

In de vorige les hebben we geleerd hoe we CSS-eigenschappen kunnen toevoegen en kleuren kunnen instellen. In deze les bespreken we een aantal eigenschappen die je waarschijnlijk al eens bent tegengekomen tijdens het leren van HTML — alleen zullen we ze nu op de juiste manier toepassen, namelijk via CSS.

De eerste eigenschap in deze les is background-color.

Background-color

Met deze eigenschap kun je niet alleen de achtergrond van blokken instellen, maar ook die van gewone tekst en links. Bijvoorbeeld:

span {
  background-color: yellow;
}

Of voor een link:

a {
  background-color: blue;
}

Background color

Kleuren kun je, net als bij de eigenschap color, ook in numerieke vorm opgeven, bijvoorbeeld #ff0000 (wat rood is).

Font-style

Je hebt waarschijnlijk al de tags of (vetgedrukt) en (cursief) gezien, en misschien ook de “slechte” -tag, die alles aan de tekst kon veranderen. Om al deze tags te vermijden gebruiken we nu de CSS-eigenschap font-style. Veelgebruikte waarden zijn:

p {
  font-style: italic; /* cursief */
}

Zo vervangen we de tag door de eigenschap font-style met de waarde italic.

font-style

Font-weight

Ook de tag , die tekst vet maakt, is inmiddels verouderd. Gebruik nu gewoon de eigenschap font-weight:

body {
  font-weight: normal; /* normale tekst */
}
 
p {
  font-weight: 400; /* normale tekst */
}
 
span {
  font-weight: 700; /* vetgedrukt */
}
 
a {
  font-weight: bold; /* vetgedrukt */
}

De waarden 400 of normal staan voor normale tekst, en 700 of bold voor vetgedrukte tekst.

CSS font-weight

Text-align

De eigenschap text-align vervangt de tag <center> en het HTML-attribuut align. Je kunt het zo gebruiken:

body {
  text-align: left; /* links uitlijnen */
}
 
p {
  text-align: justify; /* uitvullen */
}
 
span {
  text-align: right; /* rechts uitlijnen */
}
 
div {
  text-align: center; /* centreren */
}

Om duidelijk te zien wat deze eigenschap doet, bekijk de afbeelding hieronder:

CSS text-align

Text-decoration

In plaats van de tags <strike> (doorhalen) en (onderstrepen) gebruiken we nu in CSS de eigenschap text-decoration:

.underline {
  text-decoration: underline; /* onderstrepen */
}
 
.line-through {
  text-decoration: line-through; /* doorhalen */
}

CSS text-decoration

Text-transform

Een andere handige CSS-eigenschap is text-transform. Deze bepaalt of tekst in hoofdletters of kleine letters wordt weergegeven.

CSS text-transform

Probeer niet om alle CSS-eigenschappen in één keer te onthouden. Als je regelmatig terugkomt op de belangrijkste eigenschappen, zul je ze vanzelf leren. De rest kun je altijd opzoeken wanneer je ze nodig hebt.

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring