CSS on Maxence Lagalle

Travaux pratiques CSS 3 : mettre en forme le mini-site

Wed, 28 Oct 2026 12:00:00 +0100

Suite des travaux pratiques : vous partez de la page HTML terminée à l’exercice 7 (voir le TP HTML) et vous la mettez en forme avec CSS, de la charte graphique jusqu’au responsive design, sans jamais perdre de vue l’accessibilité. Si vous n’avez pas terminé la première partie, vous pouvez repartir du fichier index.html de l’annexe en bas de page.

Travaux pratiques HTML 5 : le mini-site d'une ville

Wed, 28 Oct 2026 12:00:00 +0100

Cette page rassemble les exercices du chapitre HTML. Vous allez construire pas à pas une page d’accueil complète, en appliquant chaque notion du cours. Chaque exercice est suivi de son corrigé, à ouvrir seulement après avoir essayé.

Mode d’emploi pour apprendre seul

Ces exercices ont été conçus pour un stage de deux journées, mais ils se pratiquent très bien en autonomie, à raison d’environ une journée de travail pour chacune des deux parties (HTML puis CSS).

Accessibilité et CSS : approfondissements et boîte à outils

Tue, 21 Jul 2026 12:00:00 +0200

10.1. CSS et accessibilité

Le focus visible

Les utilisateurs au clavier repèrent leur position grâce au contour de focus que le navigateur dessine autour de l’élément actif. Le supprimer (outline: none) sans le remplacer rend le site inutilisable au clavier. Pour le personnaliser :

a:focus-visible,
button:focus-visible {
 outline: 3px solid #1f4e79;
 outline-offset: 2px;
}

Respecter les préférences de l’utilisateur

Deux media queries adaptent la page aux réglages du système d’exploitation :

/* Réduire les animations pour les personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
 * {
 animation: none;
 transition: none;
 }
}
 
/* Proposer un thème sombre */
@media (prefers-color-scheme: dark) {
 :root {
 --fond: #1a1a2e;
 --texte: #f0f0f0;
 }
}

Masquer sans exclure

display: none et visibility: hidden retirent un contenu de l’écran et des lecteurs d’écran. Pour un texte destiné aux seuls lecteurs d’écran (préciser le contexte d’un bouton-icône, par exemple), on utilise une classe utilitaire consacrée, dite « sr-only », qui masque visuellement sans retirer de l’arbre d’accessibilité :

Le web, les standards et l'accessibilité

Tue, 21 Jul 2026 12:00:00 +0200

1.1. Trois langages complémentaires

Une page web moderne repose sur trois langages aux rôles bien distincts :

HTML (HyperText Markup Language) décrit le contenu et sa structure : titres, paragraphes, images, liens, tableaux, formulaires…
CSS (Cascading Style Sheets) décrit la présentation : couleurs, polices, dimensions, positionnement des éléments.
JavaScript apporte l’interactivité : réaction aux actions de l’utilisateur, modification dynamique de la page. Il n’est pas traité dans cette formation.

Cette séparation des responsabilités est un principe fondamental : un document HTML doit rester compréhensible et utilisable même sans CSS ni JavaScript. C’est aussi la base de l’accessibilité et du référencement.

Responsive design : s'adapter à tous les écrans

Tue, 21 Jul 2026 12:00:00 +0200

9.1. Le principe

Plus de la moitié du trafic web mondial provient des téléphones. Le responsive design consiste à concevoir une page unique dont la mise en page s’adapte à la largeur de l’écran, plutôt que des sites séparés par appareil. Trois ingrédients : la balise meta viewport, des dimensions fluides, et les media queries.

9.2. La balise meta viewport

Sans instruction contraire, un navigateur mobile affiche la page comme sur un écran de bureau de ~980 px, puis dézoome. La balise suivante, à placer dans le <head> de toutes les pages, désactive ce comportement :

Positionnement des éléments en CSS

Mon, 13 May 2024 12:00:00 +0100

8.1. Le flux normal

Par défaut, les éléments se positionnent « dans le flux » : les blocs s’empilent verticalement (leurs marges verticales fusionnant), les éléments en ligne s’enchaînent horizontalement avec renvoi à la ligne automatique. Toute mise en page consiste à organiser des exceptions maîtrisées à ce flux — et les outils modernes pour le faire sont Flexbox et Grid.

8.2. La propriété position

position change le mode de positionnement d’un élément ; le décalage se règle ensuite avec top, right, bottom et left :

Syntaxe CSS 3, sélecteurs et propriétés usuelles

Sun, 12 May 2024 21:00:00 +0100

6.1. Anatomie d’une feuille de style

Une feuille de style CSS se compose de règles. Chaque règle est introduite par un sélecteur, qui désigne les éléments HTML concernés, suivi d’un bloc de déclarations entre accolades. Une déclaration associe une propriété à une valeur et se termine par un point-virgule :

selecteur-1 {
 propriete-1: valeur;
 propriete-2: valeur;
}
 
selecteur-2 {
 propriete-3: valeur;
}

Les commentaires s’écrivent /* commentaire */. CSS repose sur deux mécanismes fondamentaux : l’héritage (un élément hérite de nombreuses propriétés de ses ancêtres, notamment celles liées au texte) et la cascade (des règles concurrentes sont départagées selon des critères de priorité, présentés en 6.4).