Partie 9 — CSS : syntaxe, sélecteurs, cascade, héritage et spécificité

Jusqu’à présent, nous avons appris à structurer le contenu avec le HTML. Mais une page HTML seule reste très basique visuellement.

C’est là qu’intervient le CSS (Cascading Style Sheets). Le CSS est responsable de l’apparence du site : couleurs, tailles, espacements, alignements, mise en page.

Beaucoup de débutants utilisent le CSS sans vraiment comprendre pourquoi un style fonctionne… ou ne fonctionne pas.

Dans cette partie, nous allons poser des bases solides : comprendre comment le CSS pense, comment il décide quel style appliquer et dans quel ordre.

👉 Comprendre le CSS évite 80 % des bugs de design.

1) Qu’est-ce que le CSS ?

Le CSS est un langage qui permet de dire au navigateur comment afficher le HTML.

HTML = structure
CSS = apparence

Exemple simple :

<p>Bonjour le monde</p>

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

Ici, le CSS dit simplement : “tous les paragraphes doivent être bleus”.

2) La syntaxe du CSS (fondamentale)

Une règle CSS est composée de trois éléments :

• un sélecteur
• une propriété
• une valeur

Exemple :

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

Lecture humaine :

• p → cible tous les paragraphes
• color → couleur du texte
• font-size → taille du texte

❌ Erreur fréquente : oublier les accolades ou les points-virgules.

3) Où écrire le CSS ?

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

CSS externe (recommandé)

<link rel="stylesheet" href="css/style.css">
  

Avantages :

• propre
• réutilisable
• professionnel

CSS interne

<style>
  body {
    background: #f5f5f5;
  }
</style>
  

CSS inline (à éviter)

<p style="color:red;">Texte</p>
  

4) Les sélecteurs CSS : cibler les bons éléments

Les sélecteurs indiquent quoi styliser.

Sélecteur par balise

p {
  color: blue;
}
  

Sélecteur par classe

.card {
  border: 1px solid #ddd;
}
  

Sélecteur par id

#header {
  background: black;
}
  

👉 Utilisez surtout les classes, évitez les ids pour le style.

5) La cascade CSS : qui gagne ?

CSS signifie Cascading Style Sheets. Cela veut dire que les règles s’empilent et se remplacent.

Exemple :

p {
  color: red;
}

p {
  color: blue;
}
  

Résultat : le texte est bleu.

Règle simple : la dernière règle gagne (si la spécificité est la même).

6) L’héritage : styles transmis aux enfants

Certaines propriétés CSS sont héritées automatiquement par les éléments enfants.

Exemple :

body {
  font-family: Arial;
  color: #333;
}
  

Tous les éléments à l’intérieur héritent de la police et de la couleur.

Propriétés souvent héritées :

• color
• font-family
• font-size

7) La spécificité : la règle la plus précise gagne

Quand plusieurs règles ciblent le même élément, le navigateur utilise la spécificité.

Ordre de puissance (du plus faible au plus fort) :

1. balise (p, div)
2. classe (.card)
3. id (#header)
4. style inline

Exemple :

p {
  color: red;
}

.text {
  color: green;
}

#main {
  color: blue;
}
  

L’élément avec l’id main sera bleu.

❌ Évitez !important, c’est un signal d’alerte.

8) Exemple réel : carte de contenu

<div class="card">
  <h2>Titre</h2>
  <p>Description du contenu</p>
</div>
  

.card {
  border: 1px solid #ddd;
  padding: 16px;
}

.card h2 {
  margin-top: 0;
}
  

Le CSS cible précisément sans conflit.

9) Erreurs fréquentes en CSS

• Ne pas comprendre pourquoi un style ne s’applique pas
• Abuser des ids
• Utiliser trop de !important
• Écrire du CSS sans structure

Vous comprenez maintenant les bases essentielles du CSS : syntaxe, sélecteurs, cascade, héritage et spécificité.

Dans la Partie 10, nous allons explorer le Box Model : margin, padding, border et comment maîtriser l’espace dans vos mises en page.

✅ Le CSS devient simple quand on comprend ses règles internes.