Définir l’apparence générale de la page

Une page peut contenir les bonnes informations tout en restant difficile à parcourir : titres peu visibles, couleurs sans cohérence ou blocs trop rapprochés. Dans cette leçon, vous allez établir une apparence générale lisible pour la page de l’atelier de jardinage. Vous travaillerez la palette, la typographie et les espacements sans encore organiser les zones de contenu en colonnes.

Partir d’une apparence cohérente

Choisissez quelques couleurs qui correspondent au sujet et attribuez à chacune un rôle précis. Pour l’atelier, un vert foncé peut servir aux titres et aux liens, un vert très pâle aux zones mises en évidence, et un ton crème à l’arrière-plan général. Gardez le texte courant dans une couleur sombre : il doit rester facile à lire sur son fond.

Centralisez les valeurs choisies au début de style.css. Une propriété personnalisée CSS, déclarée par exemple dans :root, permet de réutiliser une valeur avec var(). Vous pourrez ainsi ajuster une couleur ou un espacement à un seul endroit plutôt que de rechercher chaque occurrence dans la feuille de style.

Établir une hiérarchie typographique

La typographie guide la lecture lorsque les niveaux sont distincts. Réservez la taille la plus forte au titre principal, utilisez une taille intermédiaire pour les titres de section, puis une taille confortable et régulière pour les paragraphes. Une police sans empattement courante, accompagnée d’une police de remplacement, limite les variations selon l’appareil utilisé. Une hauteur de ligne suffisante évite que les phrases paraissent tassées.

Utilisez une échelle simple plutôt que de choisir une valeur différente pour chaque élément. Ici, le titre principal est plus grand et plus marqué que les sous-titres ; les paragraphes partagent la même taille et la même hauteur de ligne. Les liens reprennent la couleur principale afin d’être repérables, sans transformer chaque partie du texte en élément décoratif.

Régler les espacements entre les blocs

Un espacement régulier rend les relations entre les contenus plus claires : un titre doit rester proche du texte qu’il introduit, tandis que deux sections distinctes ont besoin de davantage de séparation. Définissez quelques valeurs réutilisables, exprimées en rem, puis appliquez-les aux marges des titres, des paragraphes et des sections. L’unité rem suit la taille de texte de base du document, ce qui facilite une mise à l’échelle cohérente.

Appliquer les styles à la page

Le document ci-dessous reprend la page de présentation : un en-tête, des horaires, des conseils pratiques et un bloc de contact. Les sélecteurs qui ciblent ces parties ont été vus dans la leçon « Cibler les éléments d’une page » ; concentrez-vous ici sur les valeurs visuelles. Placez le HTML dans index.html et les règles dans l’unique fichier style.css, dans le même dossier.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier de jardinage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="entete">
        <h1>Atelier de jardinage</h1>
        <p>Apprenez à cultiver votre jardin, saison après saison.</p>
    </header>
    <main>
        <section class="section" id="horaires">
            <h2>Horaires</h2>
            <p>Retrouvez-nous le samedi, de 10 h à 12 h, au jardin partagé.</p>
        </section>
        <section class="section conseil" id="conseils">
            <h2>Conseils pratiques</h2>
            <p>Prévoyez des gants, un carnet et des vêtements adaptés à la météo.</p>
        </section>
        <section class="section contact" id="contact">
            <h2>Contact</h2>
            <p>Écrivez à <a href="mailto:[email protected]">[email protected]</a>.</p>
        </section>
    </main>
    <footer class="pied">
        <p>Atelier ouvert à toutes et à tous.</p>
    </footer>
</body>
</html>

:root {
    --couleur-principale: #285943;
    --couleur-fond: #f7f5ec;
    --couleur-accent: #e6efdf;
    --couleur-texte: #252a26;
    --espacement-petit: 0.5rem;
    --espacement-moyen: 1rem;
    --espacement-grand: 2rem;
}

body {
    margin: 0;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.entete,
.pied {
    padding: var(--espacement-grand);
    background-color: var(--couleur-principale);
    color: #ffffff;
}

h1,
h2 {
    color: var(--couleur-principale);
    line-height: 1.2;
}

.entete h1 {
    color: #ffffff;
    font-size: 2rem;
    margin: 0 0 var(--espacement-petit);
}

.entete p,
.pied p {
    margin: 0;
}

main {
    padding: var(--espacement-moyen);
}

.section {
    margin-bottom: var(--espacement-grand);
}

.section h2 {
    font-size: 1.4rem;
    margin: 0 0 var(--espacement-petit);
}

.section p {
    margin: 0;
}

.conseil {
    padding: var(--espacement-moyen);
    background-color: var(--couleur-accent);
}

.contact a {
    color: var(--couleur-principale);
    font-weight: 700;
}

En ouvrant index.html dans votre navigateur, vous obtenez un en-tête vert foncé avec un titre blanc, un fond crème et du texte sombre. Les sections disposent d’une séparation régulière, tandis que les conseils se distinguent par un fond vert pâle. Les titres forment une hiérarchie visible et le lien de contact reprend la couleur principale.

À retenir

• Attribuez un rôle précis à chaque couleur et réutilisez une palette courte.
• Distinguez le titre principal, les titres de section et le texte courant par leur taille et leur graisse.
• Choisissez une hauteur de ligne confortable pour faciliter la lecture des paragraphes.
• Centralisez couleurs et espacements dans des variables CSS déclarées dans :root.
• Appliquez des espacements réguliers afin de séparer les sections sans éloigner leurs titres de leur contenu.

Dans la prochaine leçon, vous construirez les zones de contenu et choisirez comment organiser les blocs de la page.