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

Les polices de caractères influencent fortement le ton et la lisibilité d’une page web.
Dans ce chapitre, nous examinons les propriétés CSS les plus couramment utilisées liées aux polices : `font-family`, `font-size`, `font-weight` et `font-style`.


Tous les exemples utilisent le même texte afin de montrer comment ces propriétés modifient l’apparence.

Remarque

## font-family
La propriété `font-family` définit la police utilisée pour afficher le texte.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
Plusieurs polices peuvent être listées comme alternatives, séparées par des virgules. Si la première police n’est pas disponible, le navigateur utilise la suivante dans la liste. Il est recommandé d’inclure systématiquement une police générique de secours telle que : `serif`, `sans-serif`, `monospace`.

## font-size
La propriété `font-size` contrôle la taille d’affichage du texte.
```css
p {
  font-size: 16px;
}
```
Unités courantes : 
- `px` : taille fixe ;
- `em` : relatif à l’élément parent ;
- `rem` : relatif à l’élément racine.

## font-weight
Contrôle l’épaisseur du texte. Valeurs numériques : `100–900`. Mots-clés : `normal`, `bold`, `lighter`.

## font-style
Spécifie le style du texte : `normal`, `italic` ou `oblique`.

## Pseudo-classe ::first-letter
`::first-letter` cible la première lettre d’un élément (généralement un paragraphe ou un titre), permettant des effets décoratifs ou stylisés.
```css
selector::first-letter {
 /* some styles */
}
```
Exécutons l’exemple suivant pour voir son fonctionnement.

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

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` définit la police de caractères et les polices de secours.

`font-size` contrôle la taille du texte en px, em ou rem.

`font-weight` ajuste l’épaisseur à l’aide de nombres ou de mots-clés.

`font-style` modifie le style de la police.

`::first-letter` applique un style à la première lettre d’un bloc de texte.

Résumé

Quelle propriété détermine l'épaisseur de la police ?

Quelle est la valeur par défaut de la propriété `font-style` en CSS ?

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Travail avec les polices et les propriétés de police

font-family

font-size

font-weight

font-style

Pseudo-classe ::first-letter

1. Quelle propriété détermine l'épaisseur de la police ?

2. Quelle est la valeur par défaut de la propriété `font-style` en CSS ?