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

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?

Style web pages using CSS to control layout, spacing, colors, and typography. Work with selectors, the box model, and Flexbox to build structured layouts. Create modern UI components using backgrounds, fonts, and visual effects.

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?