Technologie · Seconde

Idées d’apprentissage actif

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.

• Programmes Officiels
• MEN: Lycee - Le Web
• MEN: Lycee - Langages et programmation

• 20–50 min
• Binômes → Classe entière
• 4 activités

Activité 01

• 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.

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.

À observer

Distribuez une petite page HTML simple (par exemple, un titre et un paragraphe). Demandez aux élèves d'écrire sur un papier : 1) Un sélecteur CSS pour cibler le titre. 2) Une propriété et une valeur pour changer la couleur du texte du paragraphe. 3) Une phrase expliquant pourquoi séparer le HTML du CSS est une bonne pratique.

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

Activité 02

• 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.

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.

À observer

Présentez aux élèves deux versions d'une même page HTML, l'une avec un CSS basique, l'autre avec un CSS plus élaboré (couleurs vives, mise en page différente). Posez la question : 'Quelles différences observez-vous dans l'apparence ? Comment le CSS a-t-il permis ces changements ?' Observez les réponses orales ou écrites.

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

Activité 03

• 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.

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.

À observer

Les élèves travaillent en binômes sur un petit projet de stylisation. L'un crée le HTML, l'autre le CSS. Après une première version, ils échangent leurs fichiers. Chaque élève doit vérifier le code de son partenaire et proposer une amélioration (un nouveau style, une adaptation pour mobile) en utilisant le vocabulaire CSS appris.

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

Activité 04

• 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.

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.

À observer

Distribuez une petite page HTML simple (par exemple, un titre et un paragraphe). Demandez aux élèves d'écrire sur un papier : 1) Un sélecteur CSS pour cibler le titre. 2) Une propriété et une valeur pour changer la couleur du texte du paragraphe. 3) Une phrase expliquant pourquoi séparer le HTML du CSS est une bonne pratique.

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

Quelques notes pour enseigner cette unité

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.

À 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

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

  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.

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

  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.

---

Méthodes utilisées dans ce dossier

• Rotation par ateliers
• Cercle de recherche
• Penser-Partager-Présenter
• Enseignement par les pairs