📘 Chapitre 1 – Sélecteurs, cascade, unités

1. 🎯 Objectif pédagogique

Comprendre le rôle des feuilles de style CSS, savoir cibler les éléments HTML avec les sélecteurs, appliquer des styles en respectant les règles de cascade et utiliser correctement les unités de mesure (px, em, rem, %, etc.).

2. 📚 Concepts abordés

  • Rôle du CSS (style.css et balise <style>)
  • Sélecteurs simples (p, h1, .classe, #id)
  • Sélecteurs combinés (div p, ul li)
  • Cascade et héritage
  • Unités de mesure : absolues (px) et relatives (em, rem, %)

3. 🧠 Explication théorique

Le CSS (Cascading Style Sheets) permet de séparer la structure HTML du style visuel. Les sélecteurs identifient les éléments à styliser. La cascade définit l’ordre de priorité :

  • Styles inline (dans l’élément HTML)
  • Styles dans <style> (dans <head>)
  • Styles externes (style.css)

Les unités définissent les tailles :

  • px : unité fixe en pixels,
  • % : taille relative à l’élément parent,
  • em : relative à la taille de la police de l’élément parent,
  • rem : relative à la taille de la police de la racine (html).

Exemple – Cibler des éléments 

h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: gray;
}

Exemple – Cibler par classe ou id 

.titre {
  text-align: center;
}
#principal {
  background-color: lightyellow;
}

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un fichier style.css qui applique des couleurs et des tailles de police aux titres et paragraphes d’une page HTML.

Arborescence du projet :

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

Étape 1 : Créer la page HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 class="titre">Bienvenue</h1>
    <p id="principal">Ceci est un paragraphe stylisé.</p>
  </body>
</html>

Étape 2 : Ajouter le fichier CSS 

.titre {
  color: darkblue;
  font-size: 2rem;
}

#principal {
  color: #333;
  font-size: 1.2em;
}

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

  • Le CSS applique des styles aux éléments HTML via des sélecteurs.
  • La cascade détermine quel style a la priorité.
  • Les unités peuvent être absolues (px) ou relatives (em, rem, %).