Fiche de révision : CSS : mise en forme d'une page
En bref
CSS (Cascading Style Sheets) permet de mettre en forme une page HTML en séparant le contenu (HTML) de l'apparence (CSS). On utilise des sélecteurs pour cibler des éléments HTML et leur appliquer des propriétés (couleur, taille, police, etc.). Le CSS peut être écrit dans un fichier .css séparé, dans l'en-tête HTML ou directement dans une balise.
Points clés
- CSS signifie Cascading Style Sheets (feuilles de style en cascade).
- Un fichier CSS externe se lie avec <link rel="stylesheet" href="style.css"> dans <head>.
- Un sélecteur cible un élément HTML (ex: p pour tous les paragraphes).
- Une déclaration associe une propriété à une valeur (ex: color: red;).
- La syntaxe CSS : sélecteur { propriété: valeur; }.
- Les propriétés courantes : color, background-color, font-size, margin, padding.
- Le CSS s'applique en cascade : les règles les plus spécifiques l'emportent.
Définitions & formules
CSS
Langage de mise en forme des pages web, complémentaire au HTML.
Sélecteur
Mot-clé ou expression qui cible un ou plusieurs éléments HTML (ex: h1, .classe, #id).
Propriété
Aspect visuel à modifier (ex: color, font-size, margin).
Valeur
Valeur attribuée à une propriété (ex: blue, 16px, 10px).
Règle CSS
Ensemble d'un sélecteur et d'un bloc de déclarations.
Méthode flash
- 1Créer un fichier .css (ex: style.css) et le lier dans le <head> du HTML avec <link>.
- 2Écrire le sélecteur (balise, classe, id) suivi d'accolades.
- 3Ajouter des déclarations : propriété: valeur; (terminer par un point-virgule).
- 4Tester la page dans un navigateur et ajuster si nécessaire.
Exemple corrigé
Énoncé
Écrire le code CSS pour que tous les paragraphes soient en bleu et de taille 18px.
Résolution
p { color: blue; font-size: 18px; }
Pièges à éviter
❌ Faux : Oublier le point-virgule après une déclaration.
✅ Correct : Toujours terminer chaque déclaration par un point-virgule.
❌ Faux : Confondre le sélecteur de classe (.classe) et d'id (#id).
✅ Correct : Une classe commence par un point, un id par un dièse.
❌ Faux : Mettre le CSS dans un fichier .txt ou .html.
✅ Correct : Le fichier CSS doit avoir l'extension .css.
Auto-évaluation
Coche ce que tu sais faire. Le reste = à revoir en priorité.
0 / 5 — continue, tu y es presque !
Tu as revu la fiche ? Passe à l'action 💪
Teste-toi sur les exercices de SNT pour ancrer ce que tu viens de réviser.
