Une page, son style

🎯 Objectif

Changer le style d'une seule page du site, alors que toutes partagent le même fichier CSS.

📖 Exemple

Le Théâtre du Moulin veut un fond clair sur sa page Spectacles, et nulle part ailleurs. Une classe sur <body> suffit :

<!-- spectacles.html -->
<body class="page-spectacles">
    <main>
        <h1>Nos spectacles</h1>
    </main>
</body>

/* style.css, partagé par toutes les pages */
main {
    padding: 16px;
}

.page-spectacles main {
    background-color: #f0f9ff;
}

La règle main s'applique à toutes les pages. La règle .page-spectacles main ne s'applique qu'à celle dont le <body> porte la classe. Les autres pages n'ont pas cette classe : pour elles, la règle n'existe pas.

Avant d'ajouter une classe de page, pose-toi une question. Ce style concerne-t-il vraiment la page, ou un bloc précis ? Une galerie ou un formulaire mérite sa propre classe, sur le bloc lui-même : tu pourras le réutiliser ailleurs.

⚠️ Un id sur <body> marcherait aussi, et c'est le piège. Rien ne pèse plus lourd qu'un id : souviens-toi de l'exercice 6.4. Une règle écrite avec un id ne se corrige plus sans !important. Garde les id pour les ancres et le JavaScript.

📝 Consigne

Sur le site de Rock'Air, la page Billets doit se distinguer des autres. Deux étapes, une par onglet :

1. Dans l'onglet HTML, ajoute à <body> la classe page-billets
2. Dans l'onglet CSS, à la fin du fichier, écris une règle qui vise le <main> de cette page seulement, avec deux déclarations :
   • un fond de couleur #fefce8
   • une bordure du haut de 4 pixels, en trait continu, couleur #eab308