Technologie · Seconde · Internet et le Web : Architecture et Navigation · 1er Trimestre

Introduction au CSS : styliser les pages web

Les élèves appliquent des styles CSS pour améliorer l'apparence visuelle des pages HTML.

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

À propos de ce thème

Le CSS (Cascading Style Sheets) est le langage qui contrôle l'apparence visuelle des pages HTML. Il permet de définir les couleurs, les typographies, les espacements et la mise en page d'un site sans modifier son contenu. En Seconde, les élèves découvrent comment un même document HTML peut prendre des formes radicalement différentes selon la feuille de style appliquée.

Le principe de cascade et de spécificité est au coeur du CSS : lorsque plusieurs règles s'appliquent au même élément, un système de priorités détermine laquelle l'emporte. Ce mécanisme peut surprendre les débutants mais développe une logique rigoureuse. Le CSS introduit aussi le concept de design adaptatif (responsive) avec les media queries, permettant à un site de s'afficher correctement sur un téléphone comme sur un ordinateur. Les ateliers où les élèves transforment visuellement une page en modifiant quelques propriétés CSS produisent des résultats immédiats et gratifiants.

Questions clés

1. Comment le CSS permet-il de séparer la présentation du contenu pour améliorer la maintenance d'un site ?
2. Dans quelle mesure les règles CSS influencent-elles l'expérience utilisateur et la cohérence visuelle d'un site ?
3. Comment un même contenu HTML peut-il s'adapter à différents appareils grâce au CSS ?

Objectifs d'apprentissage

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

Avant de commencer

Introduction au HTML : Structure des pages web

Pourquoi : Les élèves doivent maîtriser les bases de la structure HTML pour pouvoir appliquer des styles CSS aux éléments existants.

Principes de base de l'Internet

Pourquoi : Comprendre le rôle du HTML comme langage de contenu est essentiel avant d'aborder le CSS comme langage de présentation.

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.

Attention à ces idées reçues

Idée reçue courante

Le CSS ne sert qu'à changer les couleurs et les polices.

Ce qu'il faut enseigner à la place

Le CSS contrôle l'intégralité de la mise en page : positionnement, espacement, grilles, animations et adaptation aux différents écrans. L'exercice CSS Zen Garden montre qu'un même contenu HTML peut devenir méconnaissable avec des styles différents.

Idée reçue courante

L'ordre des règles CSS n'a pas d'importance.

Ce qu'il faut enseigner à la place

La cascade suit des règles de priorité précises : spécificité du sélecteur, ordre d'apparition et utilisation de !important. Expérimenter avec des règles contradictoires aide les élèves à comprendre pourquoi un style ne s'applique pas toujours comme prévu.

Idées d'apprentissage actif

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.

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

45 min·Petits groupes

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.

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

30 min·Binômes

Liens avec le monde réel

• Les développeurs web front-end, comme ceux travaillant pour des entreprises de e-commerce comme Veepee, utilisent le CSS pour créer des interfaces utilisateur attrayantes et fonctionnelles, assurant que les catalogues de produits s'affichent correctement sur tous les appareils.
• Les designers UI/UX chez des agences comme Publicis Sapient emploient le CSS pour traduire des maquettes graphiques en pages web interactives, garantissant une expérience utilisateur cohérente et agréable sur des sites d'entreprises ou des applications mobiles.

Idées d'évaluation

Billet de sortie

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.

Vérification rapide

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.

Évaluation par les pairs

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.

Questions fréquentes

Comment le CSS permet-il d'adapter un site à différents appareils ?

Les media queries sont des conditions CSS qui détectent les caractéristiques de l'écran (largeur, orientation). Elles permettent d'appliquer des styles différents selon l'appareil : colonnes côte à côte sur ordinateur, empilées sur téléphone. C'est le principe fondamental du design responsive.

Que signifie 'cascading' dans CSS ?

Le mot 'cascade' décrit le mécanisme par lequel le navigateur résout les conflits entre plusieurs règles CSS ciblant le même élément. Il prend en compte l'origine de la règle, sa spécificité et son ordre dans le code pour déterminer quelle déclaration l'emporte.

Comment le CSS améliore-t-il la maintenance d'un site ?

En centralisant les styles dans un fichier séparé, une modification unique peut affecter l'ensemble des pages du site. Changer la couleur de tous les titres ne nécessite qu'une seule ligne dans le fichier CSS, au lieu de modifier chaque page individuellement.

Pourquoi l'expérimentation directe est-elle clé pour apprendre le CSS ?

Le CSS produit un retour visuel instantané : chaque modification de propriété transforme l'affichage en temps réel. Cette boucle de rétroaction rapide permet aux élèves de tester des hypothèses, d'observer les résultats et de corriger leurs erreurs par eux-mêmes, rendant l'apprentissage à la fois autonome et engageant.