Assembler la page

Tu sais fabriquer des boîtes, les espacer, les nommer et les aligner. Il reste à les faire tenir ensemble dans une page qui ressemble à un vrai site.

Bonne nouvelle : il n'y a rien de nouveau à apprendre. Ce cours ne fait que combiner ce qui précède.

🎯 Objectifs

À la fin de ce cours, tu seras capable de :

Centrer le contenu principal d'une page.
Composer un pied de page discret.
Fabriquer une classe réutilisable de type « carte ».
Reconnaître ce motif sur les sites que tu visites.

Centrer tout le contenu d'un coup

La recette du centrage — une largeur maximale, puis margin: auto — devient beaucoup plus intéressante appliquée au <main> : elle centre tout le contenu de la page en une seule règle.

main {
  max-width: 700px;
  margin: 30px auto;
  padding: 0 20px;
}

max-width: 700px limite la longueur des lignes ;
margin: 30px auto donne 30 px en haut et en bas, et centre horizontalement ;
padding: 0 20px évite que le texte colle aux bords sur un téléphone.

L'en-tête et le pied de page, eux, restent en pleine largeur. C'est exactement ce qu'on veut : les bandeaux traversent l'écran, le texte reste dans sa colonne.

💡 Astuce : élargis puis rétrécis la fenêtre de ton navigateur pour vérifier. Le contenu doit rester centré et lisible à toutes les largeurs.

Un pied de page discret

Un pied de page ne cherche pas l'attention : texte plus petit, couleur atténuée, centré, un peu d'air.

footer {
  background-color: Gainsboro;
  color: #5a6b7d;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

Cinq propriétés, toutes déjà vues. C'est le principe de tout ce cours : la mise en page n'est pas une accumulation de nouvelles propriétés, c'est la combinaison des mêmes.

La carte, motif universel

Regarde n'importe quel site moderne — une boutique, un journal, un catalogue de films. Le contenu est presque toujours découpé en cartes : un bloc au fond blanc, une bordure fine, des angles arrondis, du padding.

.carte {
  background-color: white;
  border: 1px solid #dfe4ee;
  border-radius: 10px;
  padding: 15px;
}

Quatre propriétés. C'est tout.

<div class="cartes">

  <div class="carte">
    <h3>Le ver</h3>
    <p>Il se recopie tout seul d'un appareil à l'autre.</p>
  </div>

  <div class="carte">
    <h3>Le cheval de Troie</h3>
    <p>Il se fait passer pour un logiciel utile.</p>
  </div>

  <div class="carte">
    <h3>Le rançongiciel</h3>
    <p>Il chiffre tes fichiers et réclame une rançon.</p>
  </div>

</div>

Pour les ranger côte à côte, un conteneur flexible suffit :

.cartes {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

Trois cartes blanches alignées côte à côte, chacune avec un titre et un court texte

🧠 À retenir : .carte est écrite une seule fois et posée sur autant d'éléments que tu veux — et sur n'importe quel type de balise. Une classe, trois cartes ici, trente sur un vrai site.

Ce que ça donne

Voici une page construite uniquement avec ce que couvre cette partie du parcours :

Une page complète : bandeau bleu foncé, barre de navigation, contenu centré dans une colonne blanche avec quatre cartes de virus, encadré d'alerte rouge et pied de page

Passe en revue ce que tu reconnais : un <header> sombre en pleine largeur, un <nav> en display: flex, un <main> centré par margin: auto, des cartes rangées côte à côte, un encadré avec un border-left épais, un <footer> discret.

Aucune de ces techniques n'a plus de mystère. C'est avec ces quelques outils que sont construits la plupart des sites que tu visites.

🧪 Vérifications

Pourquoi centre-t-on le <main> plutôt que le <body> ?
Quelles propriétés faut-il pour fabriquer une carte ?
Sur quel élément écrit-on display: flex pour aligner trois cartes ?
Que se passe-t-il sans flex-wrap: wrap sur un écran étroit ?

✍️ À retenir

main { max-width: …; margin: … auto; } centre le contenu de toute la page.
Les bandeaux (header, footer) restent en pleine largeur : c'est voulu.
Une carte = fond + bordure fine + border-radius + padding.
Une classe écrite une fois s'applique à autant d'éléments que nécessaire.
La mise en page combine toujours les mêmes outils : padding, margin, largeur, flex.

Suite

Tu sais structurer et mettre en page. Mais toutes tes règles CSS visent encore soit une balise, soit une classe. La partie suivante ouvre l'éventail : cibler précisément, comprendre qui l'emporte quand deux règles se contredisent, et choisir ses couleurs.