CSS fondamentaux : mettre en forme des pages web modernes
CSS fondamentaux est un cours de niveau débutant de 6 leçons (environ 3 h 05), avec 18 exercices et 18 questions de quiz. Prérequis : HTML fondamentaux. Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Débutant
- 6 leçons
- 3 h 05
- 18 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours vous apprend à donner une identité visuelle à vos pages HTML avec CSS. Vous comprendrez la cascade et la spécificité pour ne plus subir vos styles, maîtriserez le modèle de boîte, la typographie et les variables CSS, puis rendrez vos interfaces interactives et accessibles. Le projet final consiste à habiller entièrement un site vitrine.
Ce que tu sauras faire
- Relier une feuille de style et cibler précisément les éléments avec les sélecteurs
- Prédire et résoudre les conflits de styles grâce à la cascade et à la spécificité
- Construire une charte graphique avec couleurs, unités relatives et variables CSS
- Maîtriser le modèle de boîte et box-sizing
- Styliser les états interactifs de façon accessible (focus, survol, formulaires)
- Positionner des éléments ponctuels (badge, en-tête collant) sans casser la mise en page
Programme des 6 leçons
- Relier une feuille de style à une page HTML
- Écrire une règle CSS (sélecteur, propriété, valeur)
- Cibler des éléments par type, classe, id et combinateurs simples
- 02
Cascade, spécificité et héritage
- Prédire quelle règle s'applique quand plusieurs ciblent le même élément
- Calculer la spécificité d'un sélecteur
- Savoir quelles propriétés s'héritent et comment le contrôler
- 03
Couleurs, unités et typographie
- Exprimer des couleurs en hexadécimal, rgb, hsl et oklch
- Choisir entre unités absolues et relatives (px, rem, em, %, vw)
- Mettre en forme le texte et centraliser les valeurs avec des variables CSS
CouleursUnités de mesureTypographiePropriétés personnalisées (variables CSS)
- 04
Le modèle de boîte
- Décrire les quatre zones d'une boîte : contenu, padding, border, margin
- Utiliser box-sizing: border-box pour maîtriser les dimensions
- Distinguer les affichages block, inline et inline-block
- 05
Pseudo-classes, pseudo-éléments et transitions
- Styliser les états interactifs (:hover, :focus-visible, :active, :disabled)
- Cibler des éléments selon leur position (:nth-child, :first-child) ou leur contenu (:has)
- Ajouter du contenu décoratif avec ::before / ::after et animer avec transition
- 06
Positionnement et superposition
- Utiliser position relative, absolute, fixed et sticky à bon escient
- Comprendre le bloc conteneur d'un élément positionné
- Gérer la superposition avec z-index
Projet final
Habiller un site vitrine avec une charte graphique complète
Reprenez un site HTML de deux ou trois pages (par exemple celui du cours HTML) et créez sa feuille de style unique : charte de couleurs et de typographie en variables, cartes de services, boutons interactifs accessibles, tableau tarifaire zébré, en-tête collant et badge positionné.
Livrables
- Un fichier css/style.css relié à toutes les pages
- Un bloc :root avec au moins 5 variables (couleurs, espacements, police)
- Des composants stylisés : en-tête sticky, navigation, cartes, boutons, formulaire, tableau
- Une courte note expliquant deux conflits de spécificité rencontrés et leur résolution
Critères d'évaluation
- Aucun style inline ni !important injustifié ; styles basés sur des classes
- box-sizing: border-box global et dimensions maîtrisées
- Tailles de texte en rem, line-height sans unité, contraste suffisant (4,5:1)
- États :hover et :focus-visible présents sur tous les éléments interactifs
- Positionnement utilisé seulement pour des éléments ponctuels
- Respect de prefers-reduced-motion pour les transitions
Questions fréquentes
Faut-il connaître HTML avant d'apprendre CSS ?
Oui, les bases suffisent : CSS met en forme des éléments HTML. Le cours HTML fondamentaux est le prérequis recommandé.
Ce cours couvre-t-il Flexbox et Grid ?
Ce cours pose les bases indispensables (sélecteurs, cascade, boîtes, positionnement). Flexbox, Grid et le responsive design font l'objet du cours suivant, Mise en page responsive.
Le CSS enseigné est-il à jour ?
Oui : syntaxe de couleurs moderne et oklch, variables CSS, propriétés logiques, :has(), :focus-visible et :user-invalid, tous pris en charge par les navigateurs actuels.
Pourquoi mon style CSS ne s'applique-t-il pas ?
Le plus souvent à cause de la spécificité, d'une faute de syntaxe ou d'un sélecteur qui ne cible pas l'élément. La leçon sur la cascade montre comment diagnostiquer avec l'inspecteur du navigateur.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « CSS fondamentaux » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.