Summary  
This chapter explains CSS font properties—font-family, font-size, font-weight, and font-style—for controlling text appearance. It also covers the ::first-letter pseudo-class for applying decorative styling to the first character of an element.

General domain of usage  
Web page typography

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

Fonts strongly influence the tone and readability of a web page.
In this chapter, we explore the most commonly used font-related CSS properties: `font-family`, `font-size`, `font-weight`, and `font-style`.


All examples use the same text to show how these properties change appearance.

Note

## font-family
The `font-family` property defines which typeface is used to display text.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
Multiple fonts can be listed as fallbacks, separated by commas. If the first font is not available, the browser uses the next one in the list. It is recommended to always include a generic fallback such as: `serif`, `sans-serif`, `monospace`.

## font-size
The `font-size` property controls how large text appears.
```css
p {
  font-size: 16px;
}
```
Common units: 
- `px`: fixed size;
- `em`: relative to parent element;
- `rem`: relative to root element.

## font-weight
Controls the thickness of text. Numeric values: `100–900`. Keywords: `normal`, `bold`, `lighter`.

## font-style
Specifies the style of the text: `normal`, `italic`, or `oblique`.

## Pseudo-class ::first-letter
`::first-letter` targets the first letter of an element (typically a paragraph or heading), allowing decorative or stylized effects.
```css
selector::first-letter {
 /* some styles */
}
```
Let's run the next example to see how it works.

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

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` defines the typeface and fallbacks.

`font-size` controls text size in px, em, or rem.

`font-weight` adjusts thickness using numbers or keywords.

`font-style` changes the font style.

`::first-letter` styles the first letter of a text block.

Summery

Which property determines the thickness of the font?

What is the default value for the `font-style` property in 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.

Working with Fonts and Font Properties

font-family

font-size

font-weight

font-style

Pseudo-class ::first-letter

1. Which property determines the thickness of the font?

2. What is the default value for the `font-style` property in CSS?