Séance 3 — CSS : l’essentiel

Couleurs, classes et boîtes

  • Écrire une règle CSS correctement
  • Brancher un fichier .css sur une page HTML
  • Viser un élément précis grâce aux classes
  • Aérer une page avec les marges
NoteUne seule séance de CSS ?

Oui. Le CSS est un océan : on pourrait y passer le semestre. On voit donc uniquement ce qui sert tous les jours, et on garde le reste dans la fiche mémo CSS, où vous trouverez des recettes toutes prêtes à recopier.

À partir de la séance 4, on passe à la programmation : c’est là que se joue la suite du cours.

1. HTML et CSS : deux métiers différents

HTML CSS
Répond à la question Quoi ? Comment ça a l’air ?
Exemple « ceci est un titre » « les titres sont rouges »
Fichier index.html style.css
NoteUne image pour comprendre

Le HTML, c’est le squelette et les organes : la structure. Le CSS, c’est les vêtements : la couleur, la taille, la position.

On peut changer de vêtements sans changer de squelette. C’est exactement pour ça qu’on sépare les deux fichiers.

2. L’anatomie d’une règle CSS

h1 {
  color: red;
}

Ça se lit : « tous les <h1> ont la couleur rouge ».

h1  {  color  :  red  ;  }
└┬┘    └──┬─┘   └─┬─┘ │
 │        │       │   └── point-virgule : fin de la déclaration
 │        │       └────── la VALEUR
 │        └────────────── la PROPRIÉTÉ (ce qu'on change)
 └─────────────────────── le SÉLECTEUR (qui on vise)
AvertissementLes 4 erreurs CSS qui font que « rien ne marche » 
h1 { color: red }      /* ❌ point-virgule oublié */
h1 { color = red; }    /* ❌ c'est « : », pas « = » */
h1 { colour: red; }    /* ❌ orthographe anglaise US : color */
h1 { color: red;       /* ❌ accolade fermante oubliée */

En CSS, une erreur ne déclenche aucun message. La ligne est simplement ignorée en silence. C’est pour ça que l’orthographe et la ponctuation comptent autant.

3. Brancher un fichier CSS

Étape 1 — Créer les deux fichiers

Dans web101, créez :

  • seance03.html
  • style.css

Dans seance03.html :

seance03.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Séance 3</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Le CSS, c'est joli</h1>
    <p>Un premier paragraphe.</p>
    <p>Un second paragraphe.</p>
  </body>
</html>

Dans style.css :

style.css
h1 {
  color: red;
}

Lancez Live Server. Le titre est rouge. 🎉

ImportantLa ligne à ne jamais oublier 
<link rel="stylesheet" href="style.css" />

Elle va dans le <head>. C’est elle qui dit au navigateur : « le style de cette page est écrit dans le fichier style.css ».

Sans cette ligne, votre CSS ne sert à rien et vous chercherez pendant 20 minutes pourquoi. C’est la panne classique de la séance.

Vous avez peut-être déjà vu :

<h1 style="color: red;">Titre</h1>

Ça marche, mais on évite. Imaginez 40 titres dans un site : il faudrait modifier 40 lignes pour changer la couleur. Avec un fichier CSS, on modifie une seule ligne.

Dans ce cours : tout le style va dans style.css.

4. Les propriétés utiles

Il existe des centaines de propriétés CSS. En voici 8 qui couvrent 80 % des besoins.

Les couleurs

h1 {
  color: darkblue;            /* couleur du texte */
  background-color: #ffe9c7;  /* couleur du fond */
}

Deux façons d’écrire une couleur :

Écriture Exemple Quand l’utiliser
Un nom anglais red, darkblue, tomato, gold Pour tester vite
Un code hexadécimal #e74c3c, #2c3e50 Pour une couleur précise
AstuceTrouver un code de couleur

Dans VS Code, tapez color: # et un petit carré de couleur apparaît à gauche. Cliquez dessus : un sélecteur de couleur s’ouvre. Vous choisissez à la souris, VS Code écrit le code.

Le texte

p {
  font-size: 18px;              /* taille */
  font-family: Arial, sans-serif; /* police */
  text-align: center;           /* alignement : left, center, right */
  line-height: 1.6;             /* espace entre les lignes */
}
NotePourquoi Arial, sans-serif avec une virgule ?

C’est une liste de secours : « utilise Arial ; si l’ordinateur ne l’a pas, utilise n’importe quelle police sans empattements ». Le dernier de la liste est toujours une famille générique : sans-serif, serif ou monospace.

Les images

img {
  width: 300px; /* largeur ; la hauteur s'adapte toute seule */
}

Exercice 3.1

Dans style.css, faites en sorte que :

  • le <h1> soit vert foncé (darkgreen) et centré
  • les paragraphes soient en taille 20px avec la police Georgia
style.css
h1 {
  color: darkgreen;
  text-align: center;
}

p {
  font-size: 20px;
  font-family: Georgia, serif;
}

Remarquez qu’on peut mettre plusieurs déclarations dans une même règle, une par ligne, chacune finie par un point-virgule.

5. Le problème : viser UN élément

Pour l’instant, p { color: blue; } colore tous les paragraphes. Et si je veux que seulement le premier soit bleu ?

C’est le rôle des classes.

Étape 2 — Ma première classe

Dans le HTML, on colle une étiquette sur l’élément :

seance03.html
<p class="intro">Un premier paragraphe.</p>
<p>Un second paragraphe.</p>

Dans le CSS, on vise l’étiquette avec un point devant :

style.css
.intro {
  color: blue;
  font-weight: bold;
}

Seul le premier paragraphe devient bleu et gras.

ImportantLe point, c’est LA chose à retenir
Où Comment on écrit Exemple
Dans le HTML sans point class="intro"
Dans le CSS avec un point .intro { … }

Oublier le point dans le CSS est l’erreur la plus fréquente de la séance. intro { color: blue; } cherche une balise <intro>… qui n’existe pas.

Une classe peut servir plusieurs fois

C’est même tout son intérêt :

<p class="important">Attention à la marche.</p>
<p>Un paragraphe normal.</p>
<p class="important">La porte est fermée à 18 h.</p>
.important {
  color: #c0392b;
  background-color: #fdecea;
}

Les deux paragraphes marqués important prennent le style.

Un élément peut avoir plusieurs classes

Séparées par une espace :

<p class="important centre">Texte important et centré.</p>
.important {
  color: #c0392b;
}

.centre {
  text-align: center;
}

Le paragraphe cumule les deux styles.

Exercice 3.2

Écrivez le HTML et le CSS pour obtenir 3 paragraphes :

  • le 1er en orange
  • le 2e normal
  • le 3e en orange aussi, mais centré en plus

Vous ne devez écrire la couleur orange qu’une seule fois dans le CSS.

seance03.html
<p class="orange">Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>
<p class="orange centre">Troisième paragraphe.</p>
style.css
.orange {
  color: orange;
}

.centre {
  text-align: center;
}

C’est l’idée clé du CSS : une classe = une idée de style, qu’on combine comme des Lego. On ne répète jamais la même déclaration deux fois.

6. Quand deux règles se contredisent

p {
  color: black;
}

.rouge {
  color: red;
}
<p class="rouge">De quelle couleur suis-je ?</p>

Ce paragraphe est visé par les deux règles. Qui gagne ?

ImportantLa règle du plus précis

Le sélecteur le plus précis gagne. .rouge vise quelques éléments, p les vise tous : c’est donc .rouge qui l’emporte, le texte est rouge.

balise  <  .classe  <  style="…" écrit dans le HTML

Et si deux règles ont la même force, c’est la dernière écrite dans le fichier CSS qui gagne. D’où le nom : Cascading Style Sheets, feuilles de style en cascade.

7. La boîte : aérer sa page

Voici l’idée la plus importante du CSS : chaque élément HTML est une boîte rectangulaire. Même un simple paragraphe.

Cette boîte a 3 épaisseurs réglables :

┌─────────────────────────────────────┐
│           margin (dehors)           │
│   ┌─────────────────────────────┐   │
│   │       border (le trait)     │   │
│   │   ┌─────────────────────┐   │   │
│   │   │  padding (dedans)   │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │  le contenu │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘
Propriété Où Moyen mnémotechnique
padding à l’intérieur de la bordure le rembourrage d’un colis
border la bordure elle-même le carton
margin à l’extérieur l’espace vide autour du colis

Étape 4 — Voir la boîte

Ajoutez dans style.css :

style.css
.encadre {
  border: 2px solid #2c6fa8;
  padding: 16px;
  margin: 24px;
  background-color: #eef6fb;
}

Et dans le HTML :

seance03.html
<p class="encadre">Je suis dans une boîte.</p>

Maintenant jouez : passez padding à 0, puis à 60px. Puis faites la même chose avec margin. Regardez la différence à chaque fois.

AstuceLa différence padding / margin en une phrase

padding éloigne le texte de la bordure. margin éloigne la bordure des voisins.

Si le fond coloré s’agrandit → c’était du padding. Si le fond reste pareil mais s’éloigne → c’était du margin.

La bordure

border: 2px solid #2c6fa8;
       └─┬─┘ └─┬─┘ └──┬───┘
         │     │      └── couleur
         │     └───────── style : solid, dashed, dotted
         └─────────────── épaisseur

Une bordure arrondie :

border-radius: 8px;

La recette pour une page qui a l’air pro

Collez ceci en haut de tous vos fichiers CSS. Vous n’avez pas besoin de comprendre chaque ligne aujourd’hui.

style.css
body {
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  color: #22303d;
  max-width: 700px;   /* la page ne dépasse jamais 700px de large */
  margin: 0 auto;     /* … et elle est centrée dans la fenêtre */
  padding: 24px;      /* … avec un peu d'air sur les bords */
}
Notemargin: 0 auto, qu’est-ce que ça veut dire ?

Quand on donne deux valeurs, la première est pour le haut et le bas, la seconde pour la gauche et la droite.

Donc : « 0 en haut et en bas, auto à gauche et à droite ». Et auto signifie « le navigateur répartit l’espace restant équitablement » — ce qui centre la boîte. C’est la recette de centrage la plus utilisée du web.

8. L’outil qui vous sauvera : l’inspecteur

Étape 5 — Inspecter

Dans le navigateur, clic droit sur un élément de votre page → Inspecter.

Un panneau s’ouvre. À gauche : votre HTML. À droite : le CSS appliqué à l’élément sélectionné.

Essayez :

  1. Cliquez sur votre <h1> dans le panneau de gauche
  2. À droite, décochez la case à côté de color: darkgreen
  3. Le titre redevient noir en direct
  4. Double-cliquez sur darkgreen, tapez purple, Entrée
AstuceL’inspecteur répond à « pourquoi ça ne marche pas ? »
  • Ma règle n’apparaît pas du tout → le fichier CSS n’est pas branché (<link>), ou le nom de la classe ne correspond pas
  • Ma règle apparaît barrée → une autre règle plus précise gagne
  • Ma règle apparaît normalement mais rien ne bouge → faute d’orthographe dans le nom de la propriété

Les modifications faites dans l’inspecteur sont perdues au rechargement. C’est un brouillon : quand ça vous plaît, recopiez-le dans style.css.

9. À toi de jouer

Exercice 3.3 — Lire du CSS

Sans ordinateur : de quelle couleur est chaque paragraphe ?

<p>A</p>
<p class="bleu">B</p>
<p class="bleu vert">C</p>
p { color: black; }
.bleu { color: blue; }
.vert { color: green; }
  • A : noir. Seule la règle p le vise.
  • B : bleu. .bleu est plus précis que p.
  • C : vert. Les deux classes ont la même force, donc c’est la dernière écrite dans le fichier CSS qui gagne — ici .vert.

⚠️ Piège : l’ordre class="bleu vert" dans le HTML ne compte pas. Seul l’ordre dans le fichier CSS compte.

Exercice 3.4 — Trouver la panne

Un camarade vous dit : « mon titre reste noir alors que j’ai bien écrit le CSS ». Voici ses fichiers.

page.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Ma page</title>
  </head>
  <body>
    <h1 class="Titre">Bienvenue</h1>
  </body>
</html>
style.css
titre {
  color: red
}

Trouvez les 3 problèmes.

  1. Le <link> manque dans le <head> : le CSS n’est jamais chargé.

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

  2. Le point manque devant le sélecteur, et la casse ne correspond pas : le HTML dit Titre, le CSS dit titre. En CSS, les noms de classes sont sensibles à la casse.

    .Titre { … }

    Mieux : renommer la classe en titre partout (minuscules, toujours).

  3. Le point-virgule manque après red.

Version corrigée :

page.html
<head>
  <meta charset="UTF-8" />
  <title>Ma page</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1 class="titre">Bienvenue</h1>
</body>
style.css
.titre {
  color: red;
}

Exercice 3.5 — Habiller ma-ville.html

Reprenez la page ma-ville.html de la séance 2. Créez ville.css, branchez-le, et obtenez :

  • La recette de base sur body (police, largeur max 700px, centrée)
  • Le <h1> centré, en blanc, sur un fond bleu foncé, avec 20px de padding
  • Les <h2> en bleu foncé
  • L’image large de 400px, avec des coins arrondis
  • Le <footer> en petit (14px), gris, centré, avec un trait au-dessus (indice : border-top)
  • Un des lieux de votre liste mis en valeur avec une classe .coup-de-coeur (fond jaune pâle, texte en gras)
ma-ville.html
<head>
  <meta charset="UTF-8" />
  <title>Ma ville</title>
  <link rel="stylesheet" href="ville.css" />
</head>
ma-ville.html
<ul>
  <li>Le Vieux-Port</li>
  <li class="coup-de-coeur">Les calanques</li>
  <li>Notre-Dame de la Garde</li>
</ul>
ville.css
body {
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  color: #22303d;
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}

h1 {
  text-align: center;
  color: white;
  background-color: #1b3a5c;
  padding: 20px;
}

h2 {
  color: #1b3a5c;
}

img {
  width: 400px;
  border-radius: 8px;
}

footer {
  font-size: 14px;
  color: gray;
  text-align: center;
  border-top: 1px solid #ddd;
  padding-top: 12px;
  margin-top: 32px;
}

.coup-de-coeur {
  background-color: #fff8c4;
  font-weight: bold;
}

Deux remarques :

  • Sans le padding: 20px sur le <h1>, le texte blanc serait collé au bord du rectangle bleu : c’est laid, et c’est exactement le rôle du padding.
  • border-top ne dessine qu’un seul côté de la bordure. Il existe aussi border-bottom, border-left et border-right.

10. Fiche mémo

Brancher le CSS (dans le <head>)

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

Une règle

selecteur {
  propriete: valeur;
}

Les sélecteurs

p        { }   /* tous les <p> */
.intro   { }   /* tous les éléments class="intro" */
body     { }   /* toute la page */

Les 8 propriétés à connaître

color: red;                      /* couleur du texte */
background-color: #eee;          /* couleur du fond */
font-size: 18px;                 /* taille du texte */
font-family: Arial, sans-serif;  /* police */
font-weight: bold;               /* gras */
text-align: center;              /* left | center | right */
width: 300px;                    /* largeur */
border-radius: 8px;              /* coins arrondis */

La boîte

padding: 16px;                   /* dedans  : éloigne le texte de la bordure */
border: 2px solid #333;          /* la bordure elle-même */
margin: 24px;                    /* dehors  : éloigne des voisins */

La recette de base à recopier partout

body {
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}

Qui gagne ?

balise < .classe < style="…" À force égale : la dernière règle écrite.

11. Avant la prochaine séance

NoteEnvie d’aller plus loin en CSS ?

La fiche mémo CSS contient des recettes prêtes à l’emploi : mettre des éléments côte à côte, faire une carte, un bouton, une grille de photos. Vous pouvez les recopier sans tout comprendre.