Summary  
This chapter explains how to use CSS font properties—font-family, font-size, font-weight, font-style—and the ::first-letter pseudo-class to control and decorate 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

Skrifttyper har stor indflydelse på tonen og læsbarheden af en webside.
I dette kapitel gennemgår vi de mest anvendte skrifttype-relaterede CSS-egenskaber: `font-family`, `font-size`, `font-weight` og `font-style`.


Alle eksempler bruger den samme tekst for at vise, hvordan disse egenskaber ændrer udseendet.

Bemærk

## font-family
Egenskaben `font-family` definerer, hvilken skrifttype der bruges til at vise tekst.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
Flere skrifttyper kan angives som alternativer, adskilt af kommaer. Hvis den første skrifttype ikke er tilgængelig, bruger browseren den næste på listen. Det anbefales altid at inkludere en generisk reserve som: `serif`, `sans-serif`, `monospace`.

## font-size
Egenskaben `font-size` styrer, hvor stor teksten vises.
```css
p {
  font-size: 16px;
}
```
Almindelige enheder:
- `px`: fast størrelse;
- `em`: relativ til overordnet element;
- `rem`: relativ til roden af dokumentet.

## font-weight
Styrer tekstens tykkelse. Numeriske værdier: `100–900`. Nøgleord: `normal`, `bold`, `lighter`.

## font-style
Angiver tekstens stil: `normal`, `italic` eller `oblique`.

## Pseudo-klasse ::first-letter
`::first-letter` målretter det første bogstav i et element (typisk et afsnit eller en overskrift), hvilket muliggør dekorative eller stiliserede effekter.
```css
selector::first-letter {
 /* some styles */
}
```
Lad os køre det næste eksempel for at se, hvordan det fungerer.

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

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` definerer skrifttype og alternativer.

`font-size` styrer tekststørrelsen i px, em eller rem.

`font-weight` justerer tykkelsen ved hjælp af tal eller nøgleord.

`font-style` ændrer skrifttypestilen.

`::first-letter` styler det første bogstav i en tekstblok.

Resumé

Hvilken egenskab bestemmer tykkelsen af skrifttypen?

Hvad er standardværdien for egenskaben `font-style` i CSS?

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Arbejde med Skrifttyper og Skrifttypeegenskaber

font-family

font-size

font-weight

font-style

Pseudo-klasse ::first-letter

1. Hvilken egenskab bestemmer tykkelsen af skrifttypen?

2. Hvad er standardværdien for egenskaben `font-style` i CSS?