Préparer la feuille de styles du projet

Une page peut sembler cohérente au départ, puis devenir difficile à modifier lorsque chaque section utilise ses propres couleurs et espacements. Vous allez préparer une feuille de styles unique pour la page de l’atelier de jardinage, afin de centraliser ces choix et de retrouver rapidement chaque règle. Cette base servira aux prochaines étapes de mise en page.

Partir d’une feuille de styles organisée

Le projet utilise un seul fichier nommé style.css. Placez-le à la racine du projet, ou dans le dossier prévu pour les ressources du site, puis reliez-le à la page HTML avec un élément link dans l’en-tête du document. Vous avez déjà travaillé avec des sélecteurs CSS et le modèle de boîte ; ici, l’objectif est de rendre les règles du projet faciles à faire évoluer.

<!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="site-header">
        <a class="site-name" href="#accueil">Atelier des Jardins</a>
    </header>
</body>
</html>

Le lien vers la feuille doit correspondre à son emplacement réel : si vous rangez le fichier dans un dossier, adaptez le chemin dans href. Les noms de classes de l’exemple donnent déjà des repères pour la suite : l’en-tête du site et son nom. Gardez des noms en minuscules, composés de mots séparés par des tirets, comme site-header.

Centraliser couleurs et espacements

Une variable CSS stocke une valeur que vous pouvez réutiliser dans plusieurs déclarations. Son nom commence par deux tirets, et vous la récupérez avec var(). Déclarer les variables dans :root les rend disponibles dans toute la page ; vous pouvez donc modifier une couleur ou une mesure à un seul endroit au lieu de rechercher chaque occurrence.

/* Couleurs utilisées dans le projet */
:root {
    --couleur-texte: #26332b;
    --couleur-fond: #f6f4ec;
    --couleur-principale: #315c3b;
    --couleur-accent: #d99a35;
    --espace-xs: 0.5rem;
    --espace-sm: 1rem;
    --espace-md: 1.5rem;
    --espace-lg: 2.5rem;
}

/* Base commune à la page */
body {
    margin: 0;
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

/* En-tête et identité du site */
.site-header {
    padding: var(--espace-md);
    background-color: var(--couleur-principale);
}

.site-name {
    color: var(--couleur-fond);
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
}

/* Les autres sections seront ajoutées au fil du projet */

Les noms des variables décrivent leur fonction plutôt que leur valeur brute. Ainsi, --couleur-principale reste pertinent même si vous changez ensuite le vert choisi. Les espacements suivent une petite échelle, de --espace-xs à --espace-lg : servez-vous de ces repères pour garder des distances visuelles régulières entre les zones et à l’intérieur des composants.

Garder des règles faciles à retrouver

Organisez style.css par sections dans l’ordre où les éléments apparaissent dans la page : variables et base commune, en-tête, contenu principal, horaires, conseils, puis contact. Ajoutez un commentaire court avant chaque ensemble de règles. Un commentaire doit expliquer le rôle de la section, sans répéter mot pour mot le sélecteur qui suit.

• Indentez chaque niveau de quatre espaces et gardez une déclaration par ligne.
• Écrivez les sélecteurs en minuscules et les noms composés avec des tirets.
• Utilisez les variables pour les couleurs et les espacements partagés.
• Regroupez les règles par zone de la page et commentez les sections utiles.
• Évitez d’ajouter une nouvelle règle si une règle existante peut être ajustée.

Après avoir enregistré les deux fichiers au bon emplacement, ouvrez la page dans votre navigateur. Vous devez voir le nom « Atelier des Jardins » sur un fond vert, avec un texte clair, et le reste de la page sur un fond légèrement cassé. Si les styles ne s’appliquent pas, vérifiez d’abord le chemin indiqué dans href et le nom exact du fichier.

À retenir

• Centralisez les couleurs et les espacements réutilisés dans :root.
• Réutilisez une variable avec var() pour modifier une valeur en un seul endroit.
• Organisez la feuille unique style.css par zones et commentez les sections.
• Appliquez les conventions du projet : quatre espaces, sélecteurs en minuscules et noms lisibles.

Dans la prochaine leçon, vous construirez le conteneur de navigation qui prendra place dans cette base de styles.