Introduction au CSS : styliser les pages web

Le CSS est un langage visuel et interactif qui demande une approche pratique pour être maîtrisé. Les élèves retiennent mieux quand ils expérimentent directement les effets des propriétés CSS sur du code réel plutôt que par des explications théoriques. Cette approche active les engage à résoudre des problèmes concrets, essentiels pour comprendre la cascade et la spécificité des sélecteurs.

• Seconde
• SNT : Culture et Citoyenneté Numérique
• 4 activités
• 20 min–50 min

Objectifs d’apprentissage

1. Expliquer comment les règles CSS séparent la structure (HTML) de la présentation (style) pour faciliter la maintenance d'un site web.
2. Comparer l'impact visuel de différentes propriétés CSS (couleur, typographie, espacement) sur un même élément HTML.
3. Démontrer comment les media queries permettent d'adapter la mise en page d'une page web pour différents appareils (ordinateur, tablette, mobile).
4. Identifier les sélecteurs CSS les plus courants et expliquer leur rôle dans l'application des styles.
5. Créer une feuille de style CSS simple pour modifier l'apparence d'une page HTML existante.

Rotation par ateliers

⏱ 50 min·Petits groupes

Rotation par ateliers: Les trois piliers du CSS

Trois ateliers : un sur les sélecteurs et la spécificité (quel style l'emporte ?), un sur le positionnement et la mise en page (flexbox), et un sur le design adaptatif avec les media queries. Chaque groupe produit un résultat visible à partager.

Préparation et détails

Comment le CSS permet-il de séparer la présentation du contenu pour améliorer la maintenance d'un site ?

Conseil de facilitation: Pour la station rotation, préparez trois postes avec des exercices progressifs : un sur les sélecteurs de base, un sur les boîtes et le positionnement, et un sur les media queries.

Setup: Tables ou bureaux organisés en 4 à 6 pôles distincts dans la salle

Materials: Fiches de consignes par station, Matériel spécifique à chaque activité, Minuteur pour les rotations

• Mémoriser
• Comprendre
• Appliquer
• Analyser
• Autogestion
• Compétences relationnelles

Cercle de recherche

⏱ 45 min·Petits groupes

Cercle de recherche: CSS Zen Garden

Les groupes reçoivent le même fichier HTML et doivent créer des mises en page radicalement différentes en ne modifiant que le CSS. Les résultats sont projetés côte à côte pour illustrer la puissance de la séparation contenu/présentation.

Préparation et détails

Dans quelle mesure les règles CSS influencent-elles l'expérience utilisateur et la cohérence visuelle d'un site ?

Conseil de facilitation: Lors du CSS Zen Garden, insistez sur le fait que les élèves ne doivent modifier que le fichier CSS, pas le HTML, pour bien comprendre la séparation des préoccupations.

Setup: Groupes en îlots avec accès aux ressources documentaires

Materials: Corpus de documents sources, Fiche de suivi du cycle de recherche, Protocole de formulation de questions, Canevas de présentation des résultats

• Analyser
• Évaluer
• Créer
• Autogestion
• Conscience de soi

Penser-Partager-Présenter

⏱ 20 min·Binômes

Penser-Partager-Présenter: Cascade et conflit de styles

Les élèves reçoivent un extrait de code CSS avec des règles contradictoires. Ils doivent prédire le résultat final, vérifier dans le navigateur, puis expliquer le mécanisme de priorité à leur binôme.

Préparation et détails

Comment un même contenu HTML peut-il s'adapter à différents appareils grâce au CSS ?

Conseil de facilitation: Pendant le Think-Pair-Share, donnez aux élèves un exemple de conflit de styles avec trois règles contradictoires pour qu'ils analysent ensemble la cascade.

Setup: Disposition de classe standard ; les élèves se tournent vers leur voisin

Materials: Consigne de discussion (projetée ou distribuée), Optionnel : fiche de prise de notes pour les binômes

• Comprendre
• Appliquer
• Analyser
• Conscience de soi
• Compétences relationnelles

Enseignement par les pairs

⏱ 30 min·Binômes

Enseignement par les pairs: Défi responsive

Un élève montre sa page web sur un écran large. Son binôme doit écrire les media queries nécessaires pour que la page s'adapte à un écran de téléphone, en justifiant chaque choix de mise en page.

Préparation et détails

Comment le CSS permet-il de séparer la présentation du contenu pour améliorer la maintenance d'un site ?

Conseil de facilitation: Pour le défi responsive, fournissez un exemple de grille simple (comme un menu) et demandez aux élèves de proposer une solution adaptée aux mobiles avant de coder.

Setup: Espace de présentation face à la classe ou plusieurs îlots d'enseignement

Materials: Fiches d'attribution des sujets, Canevas de préparation de séance, Grille d'évaluation par les pairs, Matériel pour supports visuels

• Comprendre
• Appliquer
• Analyser
• Créer
• Autogestion
• Compétences relationnelles

Enseigner ce sujet

Commencez par une démonstration rapide en direct : montrez comment un simple changement de couleur ou de police transforme une page HTML. Utilisez des exemples concrets et visibles pour ancrer les concepts avant de passer à la théorie. Évitez les explications trop longues sur la syntaxe CSS en début de séquence : privilégiez l'expérimentation guidée. Les recherches en pédagogie des sciences informatiques montrent que les élèves comprennent mieux quand ils manipulent le code immédiatement, même avec des erreurs, plutôt que d'écouter passivement.

À quoi s’attendre

À la fin de ces activités, les élèves pourront expliquer la séparation entre HTML et CSS, appliquer des styles de base et résoudre des conflits de priorité. Ils devront aussi justifier leurs choix de sélecteurs et adapter une mise en page pour différents écrans. Leur travail reflétera une compréhension claire des concepts, pas seulement une mémorisation.

Attention à ces idées reçues

Idée reçue courante

Pendant la station rotation, certains élèves pensent que le CSS ne sert qu'à changer les couleurs et les polices.

Ce qu'il faut enseigner à la place

Au poste sur les media queries, demandez aux élèves de tester une même page sur différents écrans (mobile, tablette, desktop) pour observer comment le CSS adapte la mise en page. Montrez-leur que le positionnement et les espacements changent radicalement, pas seulement les couleurs.

Idée reçue courante

Pendant le Think-Pair-Share, des élèves déclarent que l'ordre des règles CSS n'a pas d'importance.

Ce qu'il faut enseigner à la place

Distribuez un exemple de code avec trois règles contradictoires (par exemple, deux couleurs différentes pour un même élément). Demandez aux élèves d'échanger leurs hypothèses sur le style final, puis testez ensemble pour voir lequel s'applique et pourquoi, en utilisant les notions de spécificité et d'ordre des règles.

Idées d'évaluation

Billet de sortie

Après la station rotation, distribuez une petite page HTML avec un titre, un paragraphe et une liste non ordonnée. Demandez aux élèves d'écrire sur une feuille : 1) Un sélecteur CSS pour cibler le titre et lui donner une couleur de fond. 2) Une propriété pour espacer les éléments de la liste. 3) Une phrase expliquant pourquoi le CSS est utile pour l'accessibilité des sites.

Question de discussion

Pendant le CSS Zen Garden, circulez entre les groupes et posez à chaque binôme : 'Quelle règle CSS a eu l'effet le plus surprenant sur la mise en page ? Pourquoi cette règle a-t-elle modifié l'apparence autant ?' Écoutez leurs réponses pour évaluer leur compréhension de la cascade et de la spécificité.

Évaluation par les pairs

Après le défi responsive, organisez un tour de table où chaque binôme présente sa solution mobile. Les autres élèves doivent identifier une amélioration possible (par exemple, un espacement plus adapté ou une police plus lisible) en utilisant le vocabulaire CSS appris.

Extensions et étayage

• Challenge : Proposez aux élèves qui terminent tôt de styliser une page existante avec un thème futuriste (néon, dégradés complexes) en utilisant uniquement des sélecteurs avancés (pseudo-classes, transitions).
• Scaffolding : Pour les élèves en difficulté, fournissez une feuille de référence avec les propriétés CSS les plus courantes (couleur, police, marge, padding) et des exemples de code à compléter.
• Deeper exploration : Invitez les élèves à explorer les animations CSS en créant un effet de survol (:hover) ou une transition entre deux états d'un bouton.

Vocabulaire clé

Sélecteur CSS	Un motif qui cible les éléments HTML auxquels appliquer des styles. Il peut s'agir d'un nom de balise, d'une classe ou d'un identifiant.
Propriété CSS	L'attribut de style que l'on souhaite modifier, comme 'color', 'font-size' ou 'margin'.
Valeur CSS	Le réglage spécifique appliqué à une propriété CSS, par exemple 'blue' pour la propriété 'color' ou '16px' pour 'font-size'.
Media Query	Une fonctionnalité CSS qui permet d'appliquer des styles différents en fonction des caractéristiques de l'appareil, comme la largeur de l'écran.
Spécificité CSS	La règle qui détermine quelle déclaration CSS sera appliquée lorsqu'il y a des conflits entre plusieurs règles ciblant le même élément.