Summary  
This chapter covers applying CSS font properties—font-family, font-size, font-weight, font-style—and the ::first-letter pseudo-class to control and stylize text appearance.

General domain of usage  
Web design

Watch this video to see how different CSS font properties—such as font-family, font-size, font-weight, and font-style—change the appearance of text on a web page. You'll also learn how the ::first-letter pseudo-class can be used for decorative effects. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Lettertypen hebben een sterke invloed op de toon en leesbaarheid van een webpagina.
In dit hoofdstuk behandelen we de meest gebruikte lettertype-gerelateerde CSS-eigenschappen: `font-family`, `font-size`, `font-weight` en `font-style`.


Alle voorbeelden gebruiken dezelfde tekst om te laten zien hoe deze eigenschappen het uiterlijk veranderen.

Opmerking

## font-family
De eigenschap `font-family` bepaalt welk lettertype wordt gebruikt om tekst weer te geven.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
Meerdere lettertypen kunnen als back-up worden opgegeven, gescheiden door komma's. Als het eerste lettertype niet beschikbaar is, gebruikt de browser het volgende in de lijst. Het is aan te raden altijd een generiek back-up lettertype toe te voegen, zoals: `serif`, `sans-serif`, `monospace`.

## font-size
De eigenschap `font-size` bepaalt hoe groot tekst wordt weergegeven.
```css
p {
  font-size: 16px;
}
```
Veelgebruikte eenheden:
- `px`: vaste grootte;
- `em`: relatief ten opzichte van het bovenliggende element;
- `rem`: relatief ten opzichte van het root-element.

## font-weight
Bepaalt de dikte van de tekst. Numerieke waarden: `100–900`. Trefwoorden: `normal`, `bold`, `lighter`.

## font-style
Specificeert de stijl van de tekst: `normal`, `italic` of `oblique`.

## Pseudo-klasse ::first-letter
`::first-letter` richt zich op de eerste letter van een element (meestal een alinea of kop), waardoor decoratieve of gestileerde effecten mogelijk zijn.
```css
selector::first-letter {
 /* some styles */
}
```
Bekijk het volgende voorbeeld om te zien hoe het werkt.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJhcnRpY2xlIj4KICAgICAgPGgyIGNsYXNzPSJ0aXRsZSI+VGhlIFBvd2VyIG9mIFN0b3JpZXM8L2gyPgogICAgICA8cCBjbGFzcz0ibGVhZCI+CiAgICAgICAgU3RvcmllcyBjb25uZWN0IHVzLiBUaGV5IHNoYXBlIGhvdyB3ZSBzZWUgdGhlIHdvcmxkLCB1bmRlcnN0YW5kIGVhY2gKICAgICAgICBvdGhlciwgYW5kIHJlbWVtYmVyIG91ciBwYXN0LiBBIHdlbGwtdG9sZCBzdG9yeSBjYW4gbW92ZSBoZWFydHMsIGNoYW5nZQogICAgICAgIG1pbmRzLCBhbmQgc3BhcmsgYWN0aW9uLgogICAgICA8L3A+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` definieert het lettertype en de alternatieven.

`font-size` regelt de tekstgrootte in px, em of rem.

`font-weight` past de dikte aan met behulp van getallen of sleutelwoorden.

`font-style` wijzigt de stijl van het lettertype.

`::first-letter` stijlt de eerste letter van een tekstblok.

Samenvatting

Welke eigenschap bepaalt de dikte van het lettertype?

Wat is de standaardwaarde voor de eigenschap `font-style` in CSS?

Stijl webpagina's met CSS. Pas kleuren, typografie, afstand en lay-outs toe en bouw responsieve componenten met Flexbox.

Werken met Lettertypen en Lettertype-eigenschappen

font-family

font-size

font-weight

font-style

Pseudo-klasse ::first-letter

1. Welke eigenschap bepaalt de dikte van het lettertype?

2. Wat is de standaardwaarde voor de eigenschap `font-style` in CSS?