CSS : mise en forme des pages⚓︎

Fiche méthode & révision — Première NSI · Chapitre 10

Fiche compacte pour refaire seul les exercices : sélecteurs, règles, texte, couleurs, bordures, tableaux et modèle des boîtes.

1. Objectifs⚓︎

À la fin du chapitre, vous devez savoir :

connaître la syntaxe d'une règle CSS et les sélecteurs ;
lire une feuille de style et prévoir les éléments concernés ;
expliquer classe vs id, bloc vs en ligne, le modèle des boîtes ;
réaliser : texte, couleurs, bordures, tableaux, mise en page de boîtes.

2. Définitions essentielles⚓︎

Terme	Définition
CSS	Langage de mise en forme des pages HTML.
Feuille externe	Fichier `.css` relié à la page.
Sélecteur	Cible les éléments à styliser.
Propriété	Aspect à modifier (`color`, `font-size`…).
Valeur	Réglage de la propriété.
Règle	`sélecteur { propriété: valeur; }`.
Classe	Style réutilisable (`.nom`).
Identifiant	Style pour un seul élément (`#nom`).
Pseudo-classe	État d'un élément (`:hover`…).
Bloc	Élément occupant toute la largeur (`<div>`).
Élément en ligne	Élément dans le flux du texte (`<span>`).
Modèle des boîtes	contenu + padding + border + margin.
Contenu	Texte / image de la boîte.
Padding	Espace intérieur (contenu ↔ bordure).
Border	Bordure de la boîte.
Margin	Espace extérieur (entre boîtes).

3. Fiches méthodes⚓︎

Créer et relier style.css

Dans <head> :

HTML

<link rel="stylesheet" href="style.css">

- Erreur : oublier le <link> ou se tromper de chemin.

Écrire une règle CSS

CSS

sélecteur {
  propriété: valeur;
}

- Erreur : oublier les accolades, le : ou le ;.

Appliquer un style à une balise

CSS

p { color: blue; }

Appliquer une règle à plusieurs balises

CSS

h1, h2 { color: red; }

Créer et utiliser une classe

CSS

.important { font-weight: bold; }

HTML

<p class="important">…</p>

Créer et utiliser un identifiant

CSS

#haut { background-color: yellow; }

HTML

<div id="haut">…</div>

Choisir entre class et id

classe : réutilisable (plusieurs éléments) ;
id : unique (un seul élément).

Utiliser <div> et <span>

<div> : conteneur bloc ; <span> : conteneur en ligne.

Modifier taille, police, graisse, italique, décoration

CSS

p {
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

Aligner du texte

CSS

h1 { text-align: center; }

Centrer une image

CSS

img { display: block; margin: auto; }

Choisir une couleur (nom, hex, RGB, RGBA)

CSS

color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);   /* avec transparence */

Couleur ou image de fond

CSS

body { background-color: #eee; }
body { background-image: url("fond.png"); }

- Erreur : chemin incorrect dans url().

Bordure et coins arrondis

CSS

div { border: 2px solid black; border-radius: 10px; }

Ajouter une ombre

CSS

div { box-shadow: 2px 2px 5px gray; }

Pseudo-classes :hover, :active, :visited

CSS

a:hover   { color: red; }      /* survol */
a:active  { color: orange; }   /* clic */
a:visited { color: purple; }   /* déjà visité */

Mettre en forme un tableau

CSS

table { border-collapse: collapse; }
th, td { border: 1px solid black; padding: 4px; }

Utiliser width, height, padding, border, margin

CSS

.boite {
  width: 200px;
  height: 100px;
  padding: 10px;     /* intérieur */
  border: 1px solid; /* bordure */
  margin: 20px;      /* extérieur */
}

Centrer une boîte avec margin: auto

CSS

.boite { width: 300px; margin: auto; }

- Erreur : oublier la largeur (sinon margin: auto ne centre pas).

4. Tableaux récapitulatifs⚓︎

Emplacement du CSS

Emplacement	Exemple
Feuille externe (recommandé)	`<link rel="stylesheet" href="style.css">`
Interne	`<style>…</style>` dans `<head>`
En ligne	attribut `style="…"`

Sélecteurs

Sélecteur	Cible	Exemple
balise	tous les éléments	`p { }`
classe	`class="…"`	`.menu { }`
id	`id="…"`	`#haut { }`

Propriétés de texte

font-size · font-family · font-weight · font-style · text-decoration · text-align · color.

Codages de couleurs

Forme	Exemple (rouge)
nom	`red`
hexadécimal	`#ff0000`
RGB	`rgb(255, 0, 0)`
RGBA	`rgba(255, 0, 0, 0.5)`

Bordures

border: épaisseur style couleur; (ex. 2px solid black) · border-radius · box-shadow.

Pseudo-classes

Pseudo-classe	État
`:hover`	survol de la souris
`:active`	élément cliqué
`:visited`	lien déjà visité

Modèle des boîtes (de l'intérieur vers l'extérieur)

contenu → padding → border → margin.

5. Lecture et compréhension de code⚓︎

Méthode

prévoir les éléments concernés par une règle (lire le sélecteur) ;
retrouver une erreur de sélecteur (. vs #, nom différent) ;
distinguer héritage et règle directe (selon les exemples du cours) ;
interpréter plusieurs propriétés appliquées ensemble ;
prévoir l'effet d'un changement de margin ou de padding.

6. Erreurs fréquentes⚓︎

Erreur	Cause / correction
CSS écrit dans le HTML par erreur	le placer dans `style.css`
Oubli du `<link>`	relier la feuille
Chemin incorrect	vérifier l'emplacement de `style.css`
Oubli des accolades	`{ … }` autour des règles
Oubli du `:` ou du `;`	`propriété: valeur;`
Confusion `.classe` / `#id`	`.` pour classe, `#` pour id
`id="#haut"` en HTML	sans `#` : `id="haut"`
Nom différent HTML / CSS	mêmes noms
Même `id` répété	un id est unique (utiliser une classe)
Mauvaise unité	`px`, `%`… cohérentes
Police sans solution de repli	`font-family: Arial, sans-serif;`
Couleur texte / fond confondue	`color` vs `background-color`
Chemin incorrect dans `url()`	vérifier le chemin de l'image
margin / padding confondus	extérieur vs intérieur
Oubli de largeur avant `margin: auto`	définir `width`

7. Questions-réponses corrigées⚓︎

Vocabulaire⚓︎

1. (N1) Qu'est-ce qu'un sélecteur ?

Ce qui cible les éléments à styliser.

2. (N1) Quelle est la syntaxe d'une règle CSS ?

sélecteur { propriété: valeur; }.

3. (N2) Différence entre classe et identifiant ?

La classe est réutilisable ; l'id est unique.

4. (N2) Différence entre <div> et <span> ?

<div> est un bloc ; <span> est en ligne.

5. (N1) Citer les quatre zones du modèle des boîtes.

contenu, padding, border, margin.

Compréhension⚓︎

6. (N1) À quoi sert .menu dans une feuille CSS ?

À styliser les éléments de classe menu.

7. (N2) Que cible h1, h2 { … } ?

Tous les <h1> et les <h2>.

8. (N2) Quelle est la différence entre padding et margin ?

padding = espace intérieur ; margin = espace extérieur.

9. (N3) Pourquoi font-family: Arial, sans-serif; ?

sans-serif sert de solution de repli si Arial est absente.

10. (N2) Que fait a:hover { color: red; } ?

Le lien devient rouge au survol.

Lecture de règles⚓︎

11. (N1) Que cible p { color: blue; } ?

Tous les paragraphes deviennent bleus.

12. (N2) Que cible #haut ?

L'élément ayant id=\"haut\".

13. (N2) Que fait text-align: center; sur un titre ?

Il centre le texte.

14. (N3) img { display: block; margin: auto; } : effet ?

L'image est centrée horizontalement.

15. (N2) Que fait border-radius: 10px; ?

Il arrondit les coins de la bordure.

Méthode⚓︎

16. (N1) Comment relier une feuille externe ?

<link rel=\"stylesheet\" href=\"style.css\"> dans <head>.

17. (N2) Comment écrire une couleur rouge en hexadécimal ?

#ff0000.

18. (N2) Comment créer une classe .titre en gras ?

.titre { font-weight: bold; }.

19. (N3) Comment centrer une boîte de 400 px ?

width: 400px; margin: auto;.

20. (N3) Comment mettre une couleur de fond à <body> ?

body { background-color: …; }.

Modèle des boîtes⚓︎

21. (N1) Quel est l'ordre des zones depuis le contenu ?

contenu → padding → border → margin.

22. (N2) Quelle propriété pour l'espace intérieur ?

padding.

23. (N2) Quelle propriété pour l'espace entre deux boîtes ?

margin.

24. (N3) Augmenter le padding : quel effet visuel ?

La boîte grossit (plus d'espace autour du contenu).

25. (N3) Pourquoi margin: auto ne centre-t-il pas sans width ?

Sans largeur fixée, la boîte occupe toute la largeur disponible.

Correction d'erreurs⚓︎

26. (N1) p { color blue; } : erreur ?

Il manque le : : color: blue;.

27. (N2) .menu en CSS mais class=\"Menu\" en HTML : erreur ?

Noms différents (casse) : harmoniser.

28. (N2) id=\"#haut\" en HTML : erreur ?

Le # ne va qu'en CSS : id=\"haut\".

29. (N3) Même id utilisé deux fois : erreur ?

Un id est unique ; utiliser une classe.

30. (N2) color utilisé pour le fond : erreur ?

Le fond, c'est background-color.

Production CSS⚓︎

31. (N1) Écrire une règle mettant les <h1> en vert.

h1 { color: green; }.

32. (N2) Créer une classe .encadre avec bordure noire.

.encadre { border: 1px solid black; }.

33. (N2) Styliser un tableau avec bordures fusionnées.

table { border-collapse: collapse; } th, td { border: 1px solid; }.

34. (N3) Donner une ombre à .carte.

.carte { box-shadow: 2px 2px 5px gray; }.

35. (N4) Styliser le squelette .header, .footer (fond + centrage texte).

CSS

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

8. Exercices flash corrigés⚓︎

Relier une feuille externe style.css

<link rel=\"stylesheet\" href=\"style.css\">.

Corriger un sélecteur : #menu pour class=\"menu\"

Utiliser .menu (classe).

Créer une classe .gras

.gras { font-weight: bold; }.

Cibler un id pied

#pied { … }.

Modifier la police d'un paragraphe

p { font-family: Arial, sans-serif; }.

Choisir un code couleur bleu en RGB

rgb(0, 0, 255).

Écrire une bordure rouge de 2 px

border: 2px solid red;.

Ajouter un effet de survol rouge sur les liens

a:hover { color: red; }.

Centrer une image

img { display: block; margin: auto; }.

Décrire les zones d'une boîte padding:10px; border:1px; margin:20px

10 px intérieurs, 1 px de bordure, 20 px extérieurs.

Styliser les cellules <td> avec bordure

td { border: 1px solid black; }.

À retenir absolument⚓︎

Syntaxe d'une règle

CSS

sélecteur {
  propriété: valeur;
}

Sélecteurs & propriétés clés

balise p { }, classe .nom { }, id #nom { } ;
classe réutilisable ; id unique ;
texte : color, font-size, font-family, font-weight, text-align ;
fond : background-color, background-image: url(…) ;
bordure : border, border-radius, box-shadow ;
pseudo-classes : :hover, :active, :visited.

Modèle des boîtes

contenu → padding (intérieur) → border → margin (extérieur) ; pour centrer une boîte : width + margin: auto.