CSS

Donnez du style à vos pages

Le CSS transforme un document brut en une interface soignée. Sélecteurs, modèle de boîte, Flexbox, Grid, responsive design puis animations et architecture CSS : ce parcours couvre tout ce qu’il faut pour styler avec méthode.

Fondations

Débutant - les bases, pas à pas

• Brancher le CSS à une pageDécouvrez ce qu'est le CSS, comment le relier à une page HTML et comment écrire votre toute première règle.
• Sélecteurs de base et couleursApprenez à cibler précisément des éléments avec les sélecteurs d'élément, de classe et d'id, puis à leur appliquer des couleurs.
• Le modèle de boîteComprenez comment chaque élément est une boîte faite de contenu, de padding, de bordure et de margin, et maîtrisez box-sizing.
• Texte et policesChoisissez une police avec font-family, réglez la taille, la graisse et l'espacement des lignes pour un texte agréable à lire.
• Premiers agencementsDistinguez les éléments block des éléments inline et apprenez les techniques classiques pour centrer un élément.

Progression

Intermédiaire - construire de vrais projets

• Cascade, spécificité et héritageApprenez à prédire quelle règle CSS l'emporte grâce à la spécificité, et à exploiter l'héritage pour écrire moins de code.
• Flexbox : axes, justify/align, gap, flex-growMaîtrisez les deux axes de Flexbox pour aligner, centrer et répartir vos éléments dans les mises en page du quotidien.
• Grid : colonnes, lignes, zonesConstruisez des galeries et des gabarits de page complets avec les colonnes, les lignes et les zones nommées de CSS Grid.
• Positionnement : relative, absolute, fixed, sticky, z-indexAncrez badges, en-têtes et fenêtres modales au bon endroit grâce aux positions CSS et à une échelle de z-index maîtrisée.
• Responsive design : media queries, unités relativesAdaptez vos interfaces à toutes les tailles d'écran avec l'approche mobile-first, les media queries et les unités rem, % et vw.

Perfectionnement

Confirmé - patterns avancés et performance

• Variables CSS et fonctions calc/clampMaîtrisez les custom properties, leur résolution à l'exécution dans la cascade, et les fonctions calc() et clamp() pour des interfaces fluides.
• Transitions et animations : @keyframes, transform, timingAnimez au niveau du compositeur avec transform et opacity, structurez vos @keyframes et respectez les préférences de mouvement des utilisateurs.
• Sélecteurs modernes : :has, :is, :where, :nth-child avancéExploitez les pseudo-classes fonctionnelles récentes pour sélectionner selon le contenu, regrouper sans exploser la spécificité et cibler des motifs complexes.
• Architecture CSS : BEM, utility-first, organisation des fichiersComparez BEM et l'approche utility-first, leurs compromis réels en équipe, et structurez vos fichiers avec les cascade layers.
• Container queries et CSS nestingRendez vos composants responsives par rapport à leur conteneur plutôt qu'au viewport, et structurez vos feuilles avec le nesting natif.

Maîtrise

Expert - architecture, internals et cas limites

• Pipeline de rendu : reflow, repaint, compositingComprenez les quatre phases du rendu navigateur pour savoir précisément quelles propriétés CSS coûtent cher et comment will-change agit sous le capot.
• Cascade layers (@layer) et @scopeMaîtrisez les deux nouveaux critères de la cascade - les couches et la proximité de portée - pour architecturer vos styles sans guerre de spécificité.
• Couleurs et fonctions avancées : oklch, color-mix, min/maxExploitez les espaces colorimétriques perceptuels, la syntaxe des couleurs relatives et les fonctions mathématiques typées pour des systèmes de design calculés par le navigateur.
• Grilles expertes : subgrid, auto-fit et minmaxConstruisez des grilles auto-adaptatives sans media queries et alignez des composants imbriqués sur les pistes du parent grâce à subgrid.
• Interactions modernes : scroll-snap, view transitionsOrchestrez des défilements magnétiques, des transitions d'état animées par le navigateur et un respect rigoureux de prefers-reduced-motion.