Retour
Module 1 : Introduction à CSS
1.1 — Lier CSS à HTML Aperçu
🛠️ Projet 1 — Première mise en forme
Module 2 : Sélecteurs CSS
2.1 — Tous les types de sélecteurs Aperçu
🛠️ Projet 2 — Ciblage précis
Module 3 : Couleurs, fonds et dégradés
3.1 — Maîtriser les couleurs CSS Aperçu
🛠️ Projet 3 — Hero section
Module 4 : Typographie web
4.1 — Polices et texte Aperçu
🛠️ Projet 4 — Article typographié
Module 5 : Box Model — Le modèle de boîte
5.1 — Comprendre le Box Model Aperçu
🛠️ Projet 5 — Cartes produit
Module 6 : Display et positionnement
6.1 — Display : le comportement des boîtes Aperçu
🛠️ Projet 6 — Layout avec position
Module 7 : Flexbox — Layout flexible
7.1 — Flexbox fondamental Aperçu
🛠️ Projet 7 — Page centrée
Module 8 : Flexbox avancé
8.1 — Contrôler les enfants flex Aperçu
🛠️ Projet 8 — Layout 3 colonnes
Module 9 : CSS Grid — Layout en grille
9.1 — Grid fondamental Aperçu
🛠️ Projet 9 — Dashboard Grid
Module 10 : CSS Grid avancé
10.1 — Grid Areas et responsive Aperçu
🛠️ Projet 10 — Galerie auto-responsive
Module 11 : Responsive Design — Media Queries
11.1 — @media et breakpoints Aperçu
🛠️ Projet 11 — Site responsive
Module 12 : Mobile First — Approche pratique
12.1 — Techniques Mobile First Aperçu
🛠️ Projet 12 — Menu hamburger
Module 13 : Transitions et animations CSS
13.1 — Transitions et keyframes Aperçu
🛠️ Projet 13 — Page animée
Module 14 : Pseudo-classes et pseudo-éléments
14.1 — Pseudo-classes et pseudo-éléments Aperçu
🛠️ Projet 14 — Tableau stylé
Module 15 : Variables CSS et organisation
15.1 — CSS propre et scalable Aperçu
🛠️ Projet 15 — Design system
Module 16 : Projet final — Site responsive complet
16.1 — Site responsive professionnel Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 2 : Sélecteurs CSS Aperçu gratuit

2.1 — Tous les types de sélecteurs

📋 Objectifs d'apprentissage

  • Utiliser les sélecteurs de type, class et id
  • Combiner les sélecteurs (descendant, enfant, adjacent)
  • Utiliser les sélecteurs d'attribut
🎯 Les sélecteurs CSS p { }Type (tous les p) .classe { }Classe (réutilisable) #id { }ID (unique) div p { }Descendant .class > .enfant | .a + .b (adjacent) | [type="text"] (attribut) | :hover, :first-child (pseudo)

Spécificité : qui gagne ?

Quand plusieurs règles ciblent le même élément : id (100) > classe (10) > type (1). #titre écrase .titre qui écrase h1. Le sélecteur le plus spécifique gagne.

SélecteurSpécificitéUsage
p0,0,1Tous les paragraphes
.intro0,1,0Éléments avec class="intro"
#header1,0,0Élément unique
div p0,0,2p dans un div

⚠️ Erreur fréquente

Abuser des ID en CSS. Les ID sont très spécifiques et difficiles à surcharger. Préférez les classes (réutilisables, moins spécifiques, plus flexibles).

Ceci est un aperçu gratuit.
Voir la formation complète