Mémo · Chapitres 4 à 6
Une règle CSS n'est pas un bloc de code mystérieux : c'est une fiche de réglages. Elle répond toujours à trois questions, dans le même ordre.
.logo { color: white; font-size: 24px; }
logo.À lire à voix haute
« Aux éléments de classe logo, je règle la couleur du texte sur blanc, et la taille des lettres sur 24 pixels. »
Classer plutôt que mémoriser
Devant une propriété inconnue, demandez-vous d'abord : touche-t-elle au texte, au fond, à la boîte, au placement ou à la taille de l'écran ? C'est déjà la moitié du travail.
color · font-size · font-family · font-weight · font-style · text-align
background-color · background-image
width · height · padding · border · border-radius · margin
display · justify-content · align-items · gap · flex-direction
@media (max-width: 768px) { … } : des règles qui ne s'appliquent que sur un petit écran.
Pour toute autre propriété, MDN la range dans l'une de ces familles. La référence CSS
Le modèle de boîte
Tout élément HTML est une boîte, emballée en quatre couches. Quand un espace « ne veut pas partir », c'est presque toujours qu'on confond la couche du dedans (padding) et celle du dehors (margin).
| Couche | Propriété | Dans le colis |
|---|---|---|
| Contenu | width, height | L'objet lui-même |
| Marge intérieure | padding: 20px; | Le papier bulle, dans le carton. Le fond le remplit. |
| Bordure | border: 3px solid #B85C00; | Le carton : épaisseur, style, couleur |
| Marge extérieure | margin: 16px; | L'espace entre deux colis. Toujours transparente. |
Exemple : un colis complet
.colis {
background-color: #FFF4E8; /* ce qui remplit le colis */
padding: 20px; /* le papier bulle */
border: 3px solid #B85C00; /* le carton */
margin: 16px; /* l'espace avec les voisins */
}
Terrain de jeu
Chaque curseur correspond à une propriété. La ligne de code concernée s'illumine quand vous la modifiez. Avant de bouger un curseur, essayez de prédire ce qui va se passer.
L'aperçu · les hachures = l'espace hors des boîtes
Le code CSS correspondant
Prédire, puis vérifier
Répondez à voix haute ou sur papier, puis vérifiez dans le terrain de jeu ci-dessus. Ensuite seulement, ouvrez la réponse. Se tromper ici est utile : c'est ce qui corrige l'idée fausse.
padding de 16 à 40 pixels. La boîte grandit-elle ? Le fond s'étend-il ?Oui aux deux. Le papier bulle est dans le carton : la boîte s'épaissit autour du texte, et la couleur de fond remplit ce nouvel espace.
margin de 0 à 30 pixels. Le fond s'étend-il ?Non. La marge extérieure est hors du carton : elle est toujours transparente. Vous voyez apparaître les hachures du parent autour de chaque boîte.
display: block. Je règle justify-content: center. Que se passe-t-il ?Rien du tout. justify-content et align-items sont des propriétés de placement flexbox : elles n'agissent que si le parent est en display: flex. Passez-le en flex, et elles se réveillent.
display: flex, avec justify-content: space-between. Où vont les trois boîtes ?Côte à côte, sur une ligne. La première se colle à gauche, la dernière à droite, et l'espace qui reste se répartit entre elles.
Méthode
Le meilleur moyen de savoir à quoi sert une ligne, c'est de la retirer et de regarder ce qu'on perd. Pas besoin de l'effacer : on la met en commentaire, et le navigateur l'ignore.
.logo {
/* display: flex; */ /* ignorée : que perd-on ? */
align-items: center;
color: white;
}
Exécutez, observez, puis retirez /* et */ pour la remettre. Une ligne à la fois, jamais plusieurs.
/* À mettre tout en haut, le temps de comprendre */
* {
outline: 1px solid red;
}
Chaque élément se dessine en rouge : on voit enfin qui prend de la place. Contrairement à border, outline ne change aucune taille. À retirer ensuite.
Dans votre propre page, ouvrez les outils de développement du navigateur (F12 ou clic droit → Inspecter). Onglet « Styles » : décochez une propriété, changez une valeur, le résultat est immédiat. L'onglet « Calculé » (Computed) dessine le colis de l'élément choisi, avec ses vraies mesures. Recopiez ensuite dans votre fichier ce qui fonctionne.
Deux jeux gratuits, en français, pour le placement : Flexbox Froggy (flexbox) et Grid Garden (grille). Et pour toute propriété : MDN.
Recettes de mise en page
Une règle à retenir pour toutes : c'est le parent qui range ses enfants. On met display: flex sur la boîte qui contient, jamais sur ce qu'on veut déplacer.
justify-content : où vont les enfants sur la ligne ↔
flex-startcenterflex-endspace-betweenalign-items : où vont les enfants en hauteur ↕
flex-startcenterflex-endstretch.menu {
display: flex;
gap: 20px;
justify-content: flex-end; /* à droite */
/* justify-content: flex-start; */ /* à gauche */
/* justify-content: center; */ /* au centre */
}
Le résultat
flex-end : à droiteflex-start : à gauchecenter : au centreUne seule ligne justify-content active : testez les trois en déplaçant les /* */.
.entete { /* parent : logo + nav */
display: flex;
justify-content: space-between;
align-items: center;
}
.entete nav { /* parent : les liens */
display: flex;
gap: 16px;
}
Le résultat
space-between : le premier à gauche, le dernier à droiteDeux boîtes flex emboîtées : l'en-tête range le logo et le menu, le menu range ses liens.
body {
margin: 0;
min-height: 100vh; /* au moins tout l'écran */
display: flex;
flex-direction: column; /* l'un sous l'autre */
}
main {
flex: 1; /* prend la place libre */
}
Le résultat
flex: 1 : collé en basLe HTML doit être <header>, <main>, <footer>, directement dans <body>. C'est flex: 1 qui pousse le footer en bas.
footer {
display: flex;
flex-direction: column;
align-items: center; /* centre à l'horizontale */
gap: 8px;
}
Le résultat
column + align-items: centerEn colonne, les rôles s'échangent : align-items centre à l'horizontale. Pour un footer sur une ligne, reprenez la recette logo + menu.
Dans l'atelier : lire une règle, emballer un colis et casser un bouton au chapitre 4 ; menu, en-tête et pied de page collé en bas au chapitre 5. Pour chaque notion, un modèle à recopier, puis un exercice à faire vous-même.
Ouvrir l'atelier web