03 - Mise en forme avec CSS (les bases)

Jusqu’à présent, nos pages HTML sont fonctionnelles… mais visuellement très simples.

Nous allons maintenant apprendre à les rendre plus agréables grâce au CSS.

1. Qu’est-ce que le CSS ?

Le CSS (Cascading Style Sheets) permet de styliser une page HTML.

Il agit sur :

• Les couleurs
• Les tailles
• Les espacements
• La mise en page

HTML = structure CSS = apparence

---

2. Ajouter du CSS

Il existe plusieurs façons d’ajouter du CSS.

La plus simple pour débuter :

<style>
p {
    color: red;
}
</style>

Ce code rend tous les paragraphes rouges.

---

3. Comprendre une règle CSS

p {
    color: blue;
    font-size: 18px;
}

• p : le sélecteur
• color : propriété
• blue : valeur

---

4. Les sélecteurs

Sélecteur par balise :

p { }

Sélecteur par classe :

.important { }

Dans le HTML :

<p class="important">Texte</p>

---

5. Couleurs et texte

body {
    background-color: #f5f5f5;
}

h1 {
    color: #333;
}

p {
    font-family: Arial;
}

---

6. Le box model

Chaque élément HTML est une boîte.

p {
    margin: 20px;
    padding: 10px;
    border: 1px solid black;
}

• margin : espace extérieur
• padding : espace intérieur
• border : bordure

---

7. À retenir

• Le CSS sert à styliser le HTML
• Une règle CSS = sélecteur + propriétés
• Les classes permettent de cibler précisément
• Le box model est essentiel

---

Conclusion

Vous venez de découvrir les bases du CSS.

Dans le prochain chapitre, nous verrons comment organiser une page avec Flexbox.

---

Navigation dans la série

          Chapitre 2 : Structurer sa page HTML
          Chapitre 4 : Mise en page Flexbox