CSS : Styling des textes

Header :

Ce cours abordera les manières les plus basique de manipuler du texte en CSS. Souvent elles seront couplées à d'autres choses, comme le positionnement de l'élément parent, mais nous en apprendront plus, plus tard !


Body

1. Police de caractères (font-family)

La propriété CSS font-family vous permet de spécifier la police de caractères à utiliser pour le texte d'un élément HTML. Vous pouvez inclure plusieurs polices de caractères dans votre liste, de sorte que si la première n'est pas disponible sur l'ordinateur de l'utilisateur, la suivante sera utilisée.

Exemple :

body {
    font-family: "Arial", sans-serif;
}

2. Taille de police (font-size)

La propriété CSS font-size définit la taille de la police du texte. Vous pouvez spécifier la taille en pixels (px), en pourcentage (%), en points (pt), en ems (em), etc. Si vous voulez plus d'info, je vous invite à lire la doc sur les tailles.

Exemple :

h1 {
    font-size: 36px;
}

3. Espacement des lignes (line-height)

La propriété CSS line-height contrôle l'espacement entre les lignes de texte dans un élément. Vous pouvez utiliser une valeur unitaire ou un nombre sans unité pour définir l'espacement.

Exemple :

p {
    line-height: 1.5; /* 1.5 fois l'espace normal */
}

4. Alignement du texte (text-align)

La propriété CSS text-align détermine comment le texte est aligné horizontalement à l'intérieur d'un élément. Vous pouvez choisir parmi les valeurs left (gauche), right (droite), center (centre), ou justify (justifié).

Exemple :

p {
    text-align: center;
}

5. Couleur du texte (color)

La propriété CSS color détermine la couleur du texte. Vous pouvez spécifier la couleur en utilisant des noms de couleur (comme "red", "blue", etc.) ou en utilisant des codes hexadécimaux ou RGB.

Exemple :

p {
    color: #333; /* Couleur de texte en hexadécimal */
}