📘 Chapitre 2 – Typographie, couleurs, bordures, modèle de boîte

1. 🎯 Objectif pédagogique

Maîtriser les propriétés CSS de typographie, de couleur, de bordures et comprendre le modèle de boîte (box model) pour organiser correctement la mise en page des éléments.

2. 📚 Concepts abordés

  • Propriétés typographiques : font-family, font-size, font-weight, text-align, line-height
  • Couleurs : color, background-color, notation hexadécimale, RGB et noms de couleurs
  • Bordures : border, border-radius, border-style
  • Modèle de boîte : margin, padding, width, height, box-sizing

3. 🧠 Explication théorique

La typographie en CSS permet de définir le style des textes :

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

Les couleurs peuvent être définies par :

  • Nom (red, blue),
  • Code hexadécimal (#ff0000),
  • Valeur RGB (rgb(255, 0, 0)).

Les bordures entourent les éléments :

div {
  border: 2px solid black;
  border-radius: 5px;
}

Le modèle de boîte (box model) définit la taille et l’espace autour d’un élément :

  • padding : espace interne entre le contenu et la bordure,
  • margin : espace externe autour de l’élément,
  • box-sizing: border-box; inclut bordures et padding dans la largeur définie.

4. 🛠 Tutoriel pratique

Résumé du travail : Créer une page HTML avec un titre et un paragraphe stylisés (typographie et couleur) dans une boîte colorée avec bordures arrondies.

Arborescence du projet :

mon_projet/
├── index.html
└── style.css

Étape 1 : Page HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typographie et Box Model</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>Bienvenue</h1>
      <p>Ceci est un exemple de typographie et de box model en CSS.</p>
    </div>
  </body>
</html>

Étape 2 : Fichier CSS 

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.container {
  background-color: white;
  color: #333;
  width: 300px;
  padding: 20px;
  margin: 30px auto;
  border: 2px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
}

5. 🧾 Résumé et points-clés

  • La typographie et les couleurs améliorent la lisibilité et l’esthétique.
  • Le box model est essentiel pour gérer les marges et l’espacement interne.
  • box-sizing: border-box; simplifie la gestion de la largeur totale d’un élément.