Que peut-on faire avec CSS ? Guide pratique

Les feuilles de style en cascade (CSS) sont le langage qui transforme le HTML brut en pages web visuellement conçues. Il contrôle la mise en page, la typographie, la couleur, le mouvement et le comportement responsive — tout ce que l'utilisateur voit.

Capacités principales

• Typographie : familles de polices, tailles, graisses, hauteur de ligne, espacement des lettres, polices variables, @font-face pour polices web personnalisées.
• Couleur & Arrière-plan : Hex, RVB, HSL, couleurs nommées, dégradés (linéaire, radial, conique), images de fond, mélanges, opacité.
• Mise en page : Flexbox, CSS Grid, multi-colonnes, floats (héritage), positionnement (relative, absolute, fixed, sticky).
• Espacement & Dimensionnement : Marge, padding, gap, largeur/hauteur, min/max, aspect-ratio, box-sizing.
• Bordures & Effets : Rayon, ombres (box-shadow, text-shadow), contours, rognage, masques, filtres (flou, niveaux de gris).
• Animation & Transition : @keyframes, transition, transform (translate, scale, rotate, skew), prefers-reduced-motion.
• Design responsive : Requêtes média, requêtes conteneur, unités viewport, typographie fluide (clamp).
• Pseudo-classes/éléments : :hover, :focus, :nth-child, ::before, ::after, ::selection.
• Propriétés personnalisées (variables CSS) : Valeurs réutilisables, thématiques, mises à jour à l'exécution via JS.
• Accessibilité : Styles de focus, modes haut contraste, mouvement réduit, propriétés logiques (margin-inline-start).

Ce que CSS ne peut pas faire

• Exécuter de la logique/boucles (utilisez JavaScript).
• Récupérer des données d'API.
• Modifier la structure HTML (seulement la styliser).
• Persister l'état entre sessions (utilisez localStorage/cookies via JS).

Bonnes pratiques modernes

• Requêtes média mobile-first.
• Propriétés logiques pour le support RTL.
• Variables CSS pour les jetons de design.
• Architecture en couches : reset → base → composants → utilitaires.
• Utilisez @supports pour l'amélioration progressive.

Le CSS est désormais un système de stylisation puissant et programmable — bien au-delà du simple outil « police et couleur » des années 2000.