Une page web bien présentée ne repose pas sur des astuces difficiles à maintenir. Avec les bases de CSS3 et les outils actuels de mise en page, vous pouvez organiser les contenus, créer une interface agréable et l’adapter aux écrans mobiles. Cette formation de deux jours vous guide pas à pas, avec des exemples proches de situations professionnelles : page de présentation, carte de service, menu de navigation ou galerie.
Vous apprendrez à comprendre les règles CSS, à choisir les bons outils pour structurer une page et à vérifier le résultat dans un navigateur. Chaque module associe des explications accessibles à un exercice pratique, afin de transformer rapidement les notions en réflexes.
Module 1 — Comprendre et écrire le CSS
Règles, sélecteurs et cascade
Vous découvrirez comment relier une feuille de style à une page HTML et comment se compose une règle CSS : sélecteur, propriété et valeur. Nous aborderons les sélecteurs courants, l’héritage, la cascade et la spécificité, pour savoir pourquoi une déclaration s’applique ou semble ignorée. Vous apprendrez aussi à organiser vos règles et à nommer vos classes de façon compréhensible.
Exemple concret : appliquer une même couleur et une typographie à plusieurs titres, tout en donnant un style particulier au titre principal, sans multiplier les règles contradictoires.
Exercice pratique
À partir d’une page HTML simple, créez une feuille de style qui définit les couleurs, la police, les titres et les liens. Repérez ensuite une règle prioritaire et expliquez pourquoi elle l’emporte sur une autre.
Module 2 — Maîtriser les blocs et les espacements
Le modèle de boîte et les propriétés essentielles
Vous comprendrez comment le navigateur calcule la taille d’un élément à partir de son contenu, de ses marges, de ses bordures et de son espace intérieur. Nous mettrons en pratique width, max-width, padding, margin, border et box-sizing. Vous verrez également comment gérer les couleurs, les fonds et les coins arrondis sans alourdir le code.
Exemple concret : concevoir une carte de service avec une largeur maîtrisée, une bordure discrète et des espacements réguliers, puis la centrer dans une page.
Exercice pratique
Transformez un bloc de texte brut en carte lisible. Réglez ses dimensions, ses marges et ses espaces intérieurs, puis vérifiez que le contenu ne déborde pas quand la fenêtre du navigateur rétrécit.
Module 3 — Organiser les éléments avec Flexbox
Aligner et répartir le contenu
Flexbox facilite l’alignement d’éléments sur une ligne ou une colonne. Vous apprendrez à définir un conteneur flexible et à utiliser les propriétés principales pour contrôler la direction, l’alignement, la répartition de l’espace et le retour à la ligne. Nous comparerons les usages de Flexbox avec les mises en page fondées sur des marges ou des positionnements plus complexes.
Exemple concret : créer une barre de navigation dont le logo reste à gauche et les liens se répartissent à droite, puis faire passer ces éléments sur plusieurs lignes lorsque l’espace manque.
Exercice pratique
Construisez une rangée de trois cartes de présentation. Alignez leurs contenus, espacez-les de manière régulière et adaptez leur disposition pour qu’elles puissent s’empiler sur un écran étroit.
Module 4 — Créer des grilles avec CSS Grid
Structurer une page en lignes et colonnes
CSS Grid permet de composer des mises en page à deux dimensions. Vous découvrirez comment définir des colonnes et des lignes, régler les espacements et placer des éléments dans une grille. Nous verrons comment choisir Grid pour structurer une galerie ou une zone de contenu, et comment le combiner avec Flexbox lorsque chaque outil a un rôle différent.
Exemple concret : organiser une galerie de projets en colonnes régulières, avec une carte mise en évidence et des espaces constants entre les éléments.
Exercice pratique
À partir de plusieurs blocs de contenu, créez une grille de portfolio. Ajustez le nombre de colonnes selon la largeur disponible et contrôlez le résultat en faisant varier la taille de la fenêtre.
Module 5 — Adapter, vérifier et améliorer une interface
Responsive design et finitions
Vous apprendrez à concevoir une interface qui reste utilisable sur mobile, tablette et ordinateur. Nous aborderons les unités adaptées, les règles conditionnelles avec les requêtes média et quelques bonnes pratiques pour éviter les largeurs rigides. Vous découvrirez aussi une méthode de vérification avec les outils du navigateur : inspecter un élément, tester une règle et corriger un débordement.
Exemple concret : faire évoluer une page à deux colonnes vers une seule colonne sur petit écran, tout en conservant un ordre de lecture logique et des textes faciles à consulter.
Exercice pratique
Reprenez la page créée durant la formation et adaptez ses espacements, sa navigation et sa grille à différentes tailles d’écran. Testez-la dans le navigateur, repérez un défaut visuel et corrigez-le en justifiant votre choix.
À retenir
À la fin des deux jours, vous disposerez d’une méthode pour écrire des styles cohérents, choisir entre Flexbox et Grid, puis vérifier le rendu sur plusieurs écrans. Vous saurez également repérer les problèmes courants liés aux sélecteurs, aux dimensions et aux espacements.
Pour aller plus loin
Continuez en appliquant ces notions à une page de votre activité ou à un petit projet personnel. Entraînez-vous à séparer la structure HTML de la présentation CSS, à garder des règles faciles à relire et à tester chaque changement dans le navigateur. Vous pourrez ensuite approfondir les animations CSS, les variables personnalisées et les principes d’accessibilité visuelle.
