Exercice de style pur : reprendre une page HTML fixe fournie et la transformer visuellement en ne modifiant que la feuille CSS — aucun changement au markup HTML autorisé. La contrainte est totale : structure imposée, sémantique figée, seul le visuel est à construire.
Le CSS Zen Garden original (csszengarden.com) illustre que le même HTML peut donner des rendus radicalement différents selon le CSS appliqué. Dans le contexte BTS, l'exercice consiste à partir d'un HTML imposé par le prof et à y appliquer un design personnel cohérent — sans jamais toucher au balisage.
La vraie difficulté : cibler des éléments précis sans pouvoir ajouter de classes, de IDs ou d'attributs. Tout passe par les sélecteurs structurels (:nth-child, :nth-of-type, :not(), + ~, ::before, ::after) et les variables CSS pour maintenir la cohérence visuelle.
Utilisation intensive de :nth-child(), ::before, ::after, :not() et des combinateurs adjacents (+ ~) pour cibler précisément chaque élément sans classes supplémentaires.
Palette de couleurs centralisée via :root { --color-primary: … }. Permet de changer l'ambiance visuelle globale en modifiant un seul point — utile pour tester différentes directions design rapidement.
Animations d'entrée sur les sections (fadeInUp), effets de hover sur les liens, transitions fluides sur les états interactifs. Tout animé en CSS pur, sans JavaScript.
Grid pour la mise en page macro (colonnes principales, zones header/footer), Flexbox pour l'alignement fin des éléments internes. Comprendre quand utiliser l'un ou l'autre est la compétence clé ici.
::before et ::after utilisés pour ajouter des éléments décoratifs (lignes, formes, icônes) sans toucher au HTML — technique essentielle quand le markup est verrouillé.
La vraie contrainte CSS ne commence qu'à partir du moment où on ne peut plus toucher le HTML. Quand le markup est libre, on a tendance à ajouter des classes pour tout — ici, impossible. Ça force à connaître réellement les sélecteurs CSS, pas juste les utiliser de temps en temps.
Comprendre la cascade et la spécificité en profondeur est devenu nécessaire : deux sélecteurs qui ciblent le même élément, lequel gagne ? Pourquoi ? Comment l'overrider sans casser autre chose ?
Résultat : un design cohérent avec une identité visuelle forte, construit sur une structure qu'on ne contrôle pas — et c'est exactement l'objectif de l'exercice.