# CSS : l'art de rendre le web présentable (et de centrer un div)

> Le CSS, c'est le langage qui habille le HTML. Couleurs, marges, typographie, animations — tout ce qui fait qu'une page web ne ressemble pas à un document Word.


*Ou : Trente ans d'évolution pour enfin pouvoir centrer un élément verticalement sans hack*

---

Le [HTML](/glossaire/developpement-web/html/) structure le contenu. Le **CSS** — *Cascading Style Sheets* — le rend présentable. Couleurs, polices, marges, mise en page, animations, responsive design. Tout ce qui fait qu'une page web ressemble à autre chose qu'un document texte brut.

C'est un langage déclaratif : vous décrivez *ce que vous voulez* (« ce paragraphe doit être en rouge, avec une marge de 20 pixels ») et le navigateur se débrouille pour l'afficher. En théorie. En pratique, la façon dont le navigateur « se débrouille » est une source inépuisable de surprises et de frustration.

## Flexbox, Grid et la fin des layouts impossibles

{.subtitle}

### Le modèle de boîte : la base de tout

Chaque élément HTML est une **boîte**. Cette boîte a un contenu, un padding (espace intérieur), une bordure, et une marge (espace extérieur). Comprendre le modèle de boîte, c'est comprendre 80% des bugs CSS.

Le piège classique : `width: 100%` ne fait pas ce que vous croyez. Un élément avec `width: 100%`, `padding: 20px` et `border: 1px solid` déborde de son conteneur — parce que la largeur par défaut ne compte que le contenu, pas le padding ni la bordure. La propriété `box-sizing: border-box` résout ça, et c'est la première ligne que tout développeur met dans son reset CSS.

### Flexbox et Grid : les outils modernes

Avant Flexbox (2012) et Grid (2017), la mise en page CSS était un exercice de contorsion. On utilisait des `float`, des `display: table`, des `position: absolute` — des hacks qui faisaient le travail mais rendaient le code incompréhensible.

**Flexbox** — pour les mises en page unidimensionnelles (une ligne ou une colonne). Aligner des éléments, les espacer uniformément, les centrer — tout ce qui était pénible est devenu trivial. `display: flex; justify-content: center; align-items: center;` — centrage vertical *et* horizontal en trois lignes.

**Grid** — pour les mises en page bidimensionnelles (lignes *et* colonnes). Créer une grille complexe avec des zones nommées, du responsive intégré, et des alignements précis. Ce qui nécessitait un [framework](/glossaire/developpement-web/framework/) CSS entier (Bootstrap) se fait maintenant en CSS natif.

### Le responsive : une page, mille écrans

Les **media queries** permettent d'appliquer des styles différents selon la taille de l'écran. L'approche **mobile-first** — commencer par le mobile et ajouter des styles pour les écrans plus grands — est devenue le standard, parce que plus de la moitié du trafic web vient des mobiles.

### Le dialogue du pixel parfait

**DevOps Dave :** Le designer veut que le bouton fasse exactement 42 pixels de haut.

**Security Sarah :** Sur quel écran ?

**DevOps Dave :** Tous.

**Security Sarah :** 42 pixels sur un écran retina de 3x, c'est 14 pixels logiques. Sur un écran 1x, c'est 42 pixels. Le pixel parfait n'existe pas sur le web — utilise des unités relatives (rem, em, %) et accepte que le résultat varie légèrement.

### Tableau récapitulatif

| Concept | En une phrase |
| :-- | :-- |
| **CSS** | Langage qui contrôle l'apparence de toutes les pages web. |
| **Modèle de boîte** | Contenu + padding + bordure + marge — la structure de tout élément. |
| **Flexbox** | Mise en page unidimensionnelle (alignement, espacement, centrage). |
| **Grid** | Mise en page bidimensionnelle (lignes et colonnes). |
| **Media query** | Appliquer des styles différents selon la taille de l'écran. |
| **Mobile-first** | Concevoir d'abord pour mobile, puis enrichir pour les grands écrans. |

### Le mot de la fin

Le CSS est le langage que tout le monde utilise et que personne ne maîtrise complètement. Mais les outils modernes — Flexbox, Grid, les variables CSS, les container queries — ont rendu le langage incomparablement plus puissant et plus logique qu'il ne l'était il y a dix ans. Et oui, on peut enfin centrer un div.