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 innflytelse på tonen og lesbarheten til en nettside.
I dette kapittelet ser vi nærmere på de mest brukte CSS-egenskapene for skrifttyper: `font-family`, `font-size`, `font-weight` og `font-style`.


Alle eksempler bruker den samme teksten for å vise hvordan disse egenskapene endrer utseendet.

Merk

## font-family
Egenskapen `font-family` definerer hvilken skrifttype som brukes til å vise tekst.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
Flere skrifttyper kan listes opp som reservevalg, adskilt med komma. Hvis den første skrifttypen ikke er tilgjengelig, bruker nettleseren den neste på listen. Det anbefales alltid å inkludere en generell reserve som: `serif`, `sans-serif`, `monospace`.

## font-size
Egenskapen `font-size` styrer hvor stor teksten vises.
```css
p {
  font-size: 16px;
}
```
Vanlige enheter:
- `px`: fast størrelse;
- `em`: relativ til overordnet element;
- `rem`: relativ til rotnoden.

## font-weight
Styrer tykkelsen på teksten. Numeriske verdier: `100–900`. Nøkkelord: `normal`, `bold`, `lighter`.

## font-style
Angir stilen på teksten: `normal`, `italic` eller `oblique`.

## Pseudo-klasse ::first-letter
`::first-letter` retter seg mot den første bokstaven i et element (vanligvis et avsnitt eller en overskrift), og muliggjør dekorative eller stiliserte effekter.
```css
selector::first-letter {
 /* some styles */
}
```
La oss kjøre neste eksempel for å se hvordan det fungerer.

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

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` definerer skrifttype og reservevalg.

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

`font-weight` justerer tykkelse ved bruk av tall eller nøkkelord.

`font-style` endrer skrifttypestil.

`::first-letter` styler den første bokstaven i en tekstblokk.

Sammendrag

Hvilken egenskap bestemmer tykkelsen på skrifttypen?

Hva er standardverdien for `font-style`-egenskapen i CSS?

Lær det grunnleggende i CSS, stilsett-språket som forvandler utseendet og følelsen på nettsider. Utforsk sentrale konsepter som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt engasjerende og velstrukturerte nettsider.

Forstå hvordan CSS kobles til HTML og hvordan stiler brukes gjennom selektorer.
Bruk av farger, tekststiler og hover-effekter for å kontrollere visuell presentasjon.

Forbedre typografi ved hjelp av linjehøyde, avstand, skriftegenskaper og egendefinerte fonter. Kontroller skrifttyper, vekt, stil og størrelse for bedre lesbarhet.

Kontroll av layoutstruktur ved bruk av margin, padding, border og bredde-egenskaper. Forståelse av boksstørrelsesatferd og elementvisningstyper som block, inline og inline-block.

Kontroller horisontale og vertikale oppsett ved hjelp av Flexbox-egenskaper. Juster retning, justering og avstand for å strukturere UI-komponenter.

Forbedre oppsett ved bruk av bakgrunnsfarger, bilder, pseudo-elementer og skygger. Style visuelle komponenter for dybde og kontrast.

Arbeide med skrifttyper og skriftegenskaper

font-family

font-size

font-weight

font-style

Pseudo-klasse ::first-letter

1. Hvilken egenskap bestemmer tykkelsen på skrifttypen?

2. Hva er standardverdien for `font-style`-egenskapen i CSS?