CSS : mettre en forme

Avant de commencer

Pourquoi le CSS

HTML décrit le contenu (le quoi) ; le CSS décrit la présentation (le à quoi ça ressemble). Sans CSS, tous les sites seraient gris et alignés à gauche. Séparer les deux, c'est un principe de pro : tu changes tout le look d'un site en touchant uniquement le CSS, sans toucher au HTML.

Ce que tu sauras faire à la fin

0. C'est quoi le CSS ?

CSS (Cascading Style Sheets, « feuilles de style en cascade ») est le langage qui met en forme le HTML. On écrit des règles qui disent « tel élément doit être de telle couleur, telle taille, à tel endroit ».

1. Brancher le CSS au HTML

Trois façons d'ajouter du CSS. On va droit à la bonne (la 3e).

La bonne méthode — un fichier séparé

Crée un fichier style.css à côté de ton index.html (même dossier), puis relie-les. Dans le <head> du HTML :

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

Et dans style.css, une première règle :

h1 {
  color: purple;
}

2. La syntaxe d'une règle

Toutes les règles CSS ont la même forme. Une fois comprise, tu peux tout écrire.

Une règle = un sélecteur (qui), puis entre accolades une ou plusieurs paires propriété : valeur ; (quoi).

Une règle peut empiler plusieurs déclarations, chacune finie par ; :

h1 {
  color: purple;
  font-size: 32px;
  text-align: center;
}

Les commentaires CSS

Un commentaire est un texte ignoré par le navigateur — pour toi (te repérer) ou pour désactiver une règle sans l'effacer.

/* Couleurs principales du site */
h1 {
  color: purple;
  /* font-size: 40px; */  /* désactivé pour l'instant */
}

3. Les sélecteurs (on joue !)

Le sélecteur, c'est qui on vise. C'est LA compétence clé du CSS, et le meilleur moyen de la muscler, c'est de jouer.

Pour utiliser une classe, on l'ajoute dans le HTML : <p class="intro">, puis on la cible avec .intro en CSS.

Classe vs id : lequel choisir ?

En pratique on stylise presque tout avec des classes. L'id reste réservé à un élément vraiment unique.

Classes multiples

Un élément peut porter plusieurs classes, séparées par des espaces dans le HTML :

<p class="texte important">Attention</p>

.texte { font-size: 16px; }
.important { color: crimson; font-weight: bold; }

Les combinateurs — four façons de cibler « dans / à côté »

Un combinateur est le symbole entre deux sélecteurs ; il précise la relation entre eux. CSS Diner t'en fait pratiquer quatre.

/* Descendant : tous les liens DANS nav, même imbriqués profond */
nav a { color: #5b2d8e; }

/* Enfant direct : seulement les li IMMÉDIATS de ul, pas ceux des sous-listes */
ul > li { list-style: square; }

/* Adjacent : seulement le premier p qui suit immédiatement un h2 */
h2 + p  { font-weight: 600; }

/* Voisins : tous les p qui suivent un h2 dans le même conteneur */
h2 ~ p  { color: #555; }

4. La cascade, l'héritage & la spécificité

Le « C » de CSS veut dire Cascading (en cascade). Quand plusieurs règles ciblent le même élément avec des valeurs différentes, le navigateur doit en choisir une. La cascade, c'est l'ensemble des règles qui décident laquelle gagne. C'est exactement ce qui te bloquera le plus souvent — autant le comprendre maintenant.

1. La spécificité — la règle la plus « précise » gagne

Chaque type de sélecteur a un poids. Plus le sélecteur est précis, plus il pèse lourd.

p        { color: blue; }    /* poids 1   */
.intro   { color: green; }   /* poids 10  */
#special { color: red; }     /* poids 100 */

Avec ce HTML : <p class="intro" id="special">Bonjour</p>

2. L'ordre — à poids égal, le dernier gagne

.intro { color: green; }
.intro { color: orange; }

2 bis. !important — la règle d'exception (à utiliser avec extrême prudence)

Il existe une façon de forcer une déclaration à gagner, quelle que soit la spécificité : écrire !important après la valeur.

p { color: blue !important; }
#special { color: red; }

@layer — la solution pro à !important (CSS 2022)

Les projets modernes (Bootstrap 5.3+, Tailwind v4, etc.) utilisent @layer pour organiser la priorité des blocs CSS sans !important. Principe : une couche déclarée en dernier dans la liste gagne sur les précédentes.

/* On déclare l'ordre de priorité UNE seule fois (en haut du CSS) */
@layer base, composants, utilitaires;

/* Les styles de base : peu prioritaires */
@layer base {
  a { color: blue; }
}

/* Les composants : priorité intermédiaire */
@layer composants {
  .bouton { background: #5b2d8e; color: white; }
}

/* Les utilitaires : priorité haute (déclaré en dernier dans la liste) */
@layer utilitaires {
  .text-center { text-align: center; }
}

Le vrai calcul de spécificité : le triplet (a, b, c)

Les navigateurs calculent la spécificité sous forme d'un triplet, pas d'une addition simple. Les chiffres 1, 10, 100 sont une aide-mémoire ; en réalité :

3. L'héritage — certaines propriétés se transmettent

Quand tu stylises un parent, certaines propriétés descendent automatiquement vers les enfants. Pas besoin de les répéter partout.

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

p       { color: black; }
.alerte { color: red; }
#titre  { color: blue; }

5. Couleurs, fonds & polices

De quoi rendre une page vivante. Quelques propriétés essentielles.

body {
  font-family: Arial, sans-serif;
  color: #333333;
  background-color: #f4f4f4;
  line-height: 1.6;
}
h1 {
  color: #5b2d8e;
  font-size: 32px;
  text-align: center;
}

Couleur avec transparence : rgba() et hsl()

.fond-tinte  { background-color: rgba(91, 45, 142, 0.12); } /* violet à 12 % */
.fond-opaque { background-color: rgba(91, 45, 142, 1);    } /* identique à #5b2d8e */
.fond-hsl    { background-color: hsl(270, 60%, 42%);      } /* teinte 270°, sat 60 %, lum 42 % */

Charger une police web (Google Fonts)

Les polices système (Arial, Georgia…) sont limitées. Pour une vraie typographie web, on charge depuis un serveur :

Dans le <head> du HTML :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      rel="stylesheet">

Puis dans le CSS :

body {
  font-family: 'Inter', Arial, sans-serif;
}

font-weight : les graisses d'une police

6. Les unités : px, %, em, rem, fr

Quand tu écris font-size: 32px ou width: 80%, le nombre est suivi d'une unité. Choisir la bonne, c'est éviter bien des surprises.

.titre {
  font-size: 2rem;     /* 2 × 16px = 32px */
  margin-bottom: 1em;  /* 1 × la taille de police de l'élément */
  width: 80%;          /* 80% de la largeur du parent */
  border: 2px solid;   /* épaisseur fixe, en pixels */
}

Les unités de la fenêtre : vw, vh, vmin

.hero {
  width: 100vw;    /* 100 % de la LARGEUR de la fenêtre */
  min-height: 80vh; /* 80 % de la HAUTEUR de la fenêtre */
  padding: 5vmin;  /* 5 % du plus petit côté (utile portrait/paysage) */
}

calc() — combiner des unités différentes

.contenu {
  width: calc(100% - 240px);   /* pleine largeur moins la sidebar */
  margin-left: calc(2rem + 4px);
  font-size: calc(1rem + 0.5vw); /* taille qui grandit avec l'écran */
}

7. Le box model : l'espace autour des éléments

Notion centrale : chaque élément HTML est une boîte, faite de 4 couches. Les comprendre, c'est maîtriser tous les espacements.

De l'intérieur vers l'extérieur : contenu → padding (espace intérieur) → border (le trait) → margin (espace extérieur entre boîtes).

.carte {
  padding: 20px;
  border: 2px solid #5b2d8e;
  margin: 16px;
}

box-sizing: border-box — le réglage qui sauve

Par défaut, quand tu écris width: 200px, c'est la largeur du contenu seul. Le padding et la bordure s'ajoutent par-dessus — ta boîte déborde de la taille prévue.

.carte {
  width: 200px;
  padding: 20px;
}
/* Largeur réelle = 200 + 20 (gauche) + 20 (droite) = 240px ! */

La solution, qu'on met tout en haut de chaque feuille CSS :

* {
  box-sizing: border-box;
}

Deux finitions très utiles

.carte {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

8. Les pseudo-classes : réagir & cibler

Une pseudo-classe stylise un élément dans un état particulier (survolé, premier de sa liste…). On l'écrit avec : collé au sélecteur.

a:hover {
  color: #5b2d8e;
  text-decoration: underline;
}

nav a:first-child {
  font-weight: bold;
}

:nth-child() — cibler par position ou alternance

li:nth-child(2)    { font-weight: bold; }        /* le 2e <li> seulement */
tr:nth-child(odd)  { background: #f6f3fb; }      /* lignes impaires = zébrage */
tr:nth-child(even) { background: #efe9f6; }      /* lignes paires */
li:not(:last-child) { border-bottom: 1px solid #e7def3; } /* trait sauf après le dernier */

:focus — l'accessibilité dès le départ

input:focus, button:focus {
  outline: 3px solid #5b2d8e;
  outline-offset: 2px;
  border-color: #5b2d8e;
}
button:active {
  transform: scale(0.97);
}

Les transitions — rendre les changements fluides

Jusqu'ici, un changement de style (au :hover) est instantané. La propriété transition le rend progressif.

a {
  color: #333;
  background-color: transparent;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
a:hover {
  color: #fff;
  background-color: #5b2d8e;
}

9. Flexbox : aligner & répartir (on joue !)

Comment mettre des éléments côte à côte, les centrer, les espacer ? Pendant des années c'était l'enfer ; aujourd'hui on a Flexbox, et c'est devenu simple — surtout si on l'apprend en jeu.

Le principe

On met display: flex sur un conteneur (le parent), et ses enfants s'alignent automatiquement. Deux propriétés rois :

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Les deux axes (le truc à visualiser)

Flexbox raisonne en axes. justify-content agit sur l'axe principal (horizontal par défaut) ; align-items sur l'axe secondaire (vertical). Tout le jeu Flexbox Froggy tourne là-dessus.

justify-content déplace les enfants le long de l'axe principal (horizontal) ; align-items les place sur l'axe secondaire (vertical).

La recette « centrer parfaitement »

Le combo le plus utile de tout le CSS : centrer un élément au milieu de son conteneur, dans les deux sens.

.boite {
  display: flex;
  justify-content: center;
  align-items: center;
}

flex-wrap — que faire quand les enfants débordent ?

Par défaut, Flexbox entasse tous les enfants sur une seule ligne, même s'ils débordent de leur conteneur. flex-wrap autorise le retour à la ligne.

.liste-cartes {
  display: flex;
  flex-wrap: wrap;    /* passage à la ligne autorisé */
  gap: 16px;          /* espace entre chaque enfant (lignes ET colonnes) */
}
.carte {
  width: 200px;       /* largeur minimale de chaque carte */
}

flex-direction: column — l'axe vertical

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-centree {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centré verticalement (car axe = colonne) */
  align-items: center;       /* centré horizontalement */
  height: 400px;
}

flex : la propriété de contrôle des enfants

Jusqu'ici on a tout réglé sur le conteneur. On peut aussi donner des instructions à chaque enfant individuellement.

.grille {
  display: flex;
  gap: 16px;
}

/* Chaque carte occupe une part égale de l'espace restant */
.carte { flex: 1; }

/* Cette carte en occupe le double */
.carte-principale { flex: 2; }

/* Sidebar fixe + contenu qui remplit le reste */
.layout {
  display: flex;
  gap: 20px;
}
.sidebar  { flex: 0 0 220px; }   /* 0 grow, 0 shrink, 220px */
.contenu  { flex: 1; }           /* grandit pour tout le reste */

/* align-self : surcharger align-items sur UN seul enfant */
.badge-special { align-self: flex-end; }  /* ce badge descend en bas */

10. Grid : des grilles (on joue !)

Flexbox aligne sur une ligne ; Grid crée des grilles (lignes ET colonnes) — parfait pour une galerie ou une mise en page de site.

.galerie {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Faire qu'une case prenne 2 colonnes

Souvent une carte doit être plus large que les autres (une « vedette »). On le dit sur l'enfant, pas sur le conteneur :

.carte-vedette {
  grid-column: span 2;
}

repeat() et minmax() — la grille qui s'adapte seule

/* Version lisible de grid-template-columns: 1fr 1fr 1fr */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Grille adaptative sans media query */
.galerie-adaptive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

grid-template-areas — dessiner la mise en page en ASCII

.page {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 0;
}
header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

grid-auto-rows — contrôler la hauteur des lignes implicites

Quand tu places plus d'éléments que ta grille ne prévoit de lignes, Grid crée des lignes implicites automatiquement. Par défaut leur hauteur est déterminée par le contenu le plus haut de la ligne — ce qui crée des hauteurs incohérentes.

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;  /* toutes les lignes auto = 200px */
  gap: 12px;
}

/* Ou avec minmax pour une hauteur minimale mais pouvant grandir */
.galerie-flexible {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 16px;
}

11. Un site qui s'adapte (responsive)

Un bon site s'affiche aussi bien sur ordinateur que sur téléphone. C'est le responsive design. La brique de base : la media query.

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}

Mobile-first vs Desktop-first : quelle stratégie choisir ?

/* Mobile-first : base = mobile (pas de media query) */
.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* On enrichit pour tablette (768px et plus) */
@media (min-width: 768px) {
  .menu {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* On enrichit encore pour desktop (1024px et plus) */
@media (min-width: 1024px) {
  .menu {
    max-width: 1100px;
    margin: 0 auto;
  }
}

Les points de rupture courants (breakpoints)

Ces valeurs varient selon le framework que tu utilises. Comparaison utile :

clamp() — la taille qui s'adapte sans media query

Pour la typographie et les espacements, il existe une technique encore plus élégante que les media queries : clamp(), qui définit un minimum, une valeur fluide et un maximum.

/* Titre : min 20px, idéal 4vw, max 48px */
h1 {
  font-size: clamp(20px, 4vw, 48px);
}

/* Marge latérale : min 16px, idéal 5%, max 80px */
.contenu {
  padding: 0 clamp(16px, 5%, 80px);
}

@media autres que la taille d'écran

Les media queries ne servent pas qu'à la taille. Deux autres courantes en prod :

/* Thème sombre : s'active si l'OS de l'utilisateur est en mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --couleur-fond: #1a1a2e;
    --couleur-texte: #e8e8f0;
  }
  body { background: var(--couleur-fond); color: var(--couleur-texte); }
}

/* Impression : simplifier la page pour l'imprimante */
@media print {
  nav, footer, .btn { display: none; }
  body { font-size: 12pt; color: black; }
}

Variables CSS — thématiser en une ligne

Au lieu de répéter #5b2d8e vingt fois dans ton CSS, définis-le une seule fois sous un nom.

:root {
  --couleur-principale: #5b2d8e;
  --couleur-fond:       #f4f4f4;
  --rayon-carte:        8px;
  --ombre-carte:        0 4px 16px rgba(0,0,0,0.10);
}

h1     { color: var(--couleur-principale); }
body   { background-color: var(--couleur-fond); }
.carte {
  border-radius: var(--rayon-carte);
  box-shadow:    var(--ombre-carte);
  border: 2px solid var(--couleur-principale);
}

12. Déboguer avec l'inspecteur (F12)

Tôt ou tard, une règle « ne marche pas » et tu ne sais pas pourquoi. L'inspecteur (les « DevTools » du navigateur) est ton meilleur ami : il te montre exactement quelles règles s'appliquent à un élément, et lesquelles ont été écrasées par la cascade.

Comment l'ouvrir et s'en servir

p.note { color: green; }
.note  { color: crimson; }

13. Mini-projet : stylise ton portfolio

On transforme ta page HTML brute en une vraie page présentable — la base de ton portfolio qu'on construira avec l'IA et déploiera en ligne aux prochaines séances.

Le cahier des charges

1. Un fichier style.css relié à ta page (aucun style en ligne).
2. * { box-sizing: border-box; } tout en haut du CSS.
3. Le body : une police agréable, un line-height confortable, une couleur de fond, une largeur de contenu centrée.
4. Le <header> : titre coloré, centré, avec du padding.
5. Le <main> : présenté en « carte » (fond blanc, padding, bordure ou ombre, margin, coins arrondis).
6. Un menu de navigation aligné avec Flexbox, avec un effet :hover sur les liens.
7. Tes compétences ou projets en grille (Grid) si tu en as plusieurs.
8. Le <footer> : discret, centré, petit texte.
9. Au moins UNE media query pour que ça tienne sur mobile.

Pour finir

Ton tableau de chasse (les jeux)

Coche au fur et à mesure. Finir un jeu en entier = un vrai cap franchi (et un bonus E3).

Ton antisèche

Vérifie tes acquis

1. Quelle est la différence entre HTML et CSS ?
2. Comment relie-t-on un fichier CSS à une page HTML ?
3. Quelle est la structure d'une règle CSS ?
4. Différence entre cibler une balise, une classe (.) et un id (#) ?
5. Entre une règle .intro et une règle #titre sur le même élément, laquelle gagne et pourquoi ? Exprime la spécificité comme un triplet (a,b,c).
6. Qu'est-ce que !important ? Pourquoi est-ce dangereux d'en abuser ?
7. Cite les 4 couches du box model. À quoi sert box-sizing: border-box ?
8. Différence entre padding et margin ? Et entre margin et gap ?
9. Quand utiliser vh plutôt que % pour la hauteur ? Quel problème peut poser 100vh sur mobile ?
10. Quand utiliser Flexbox plutôt que Grid ? Et flex-wrap: wrap, ça sert à quoi ?
11. Que fait repeat(auto-fill, minmax(180px, 1fr)) ? En quoi est-ce différent de repeat(3, 1fr) ?
12. Qu'est-ce qu'une variable CSS ? Comment en déclarer une et l'utiliser ?
13. Comment voir, avec F12, qu'une règle a été écrasée ?
14. Quelle est la différence entre approche mobile-first et desktop-first ?

Glossaire