Choisir couleurs et unités

Une couleur mal choisie peut rendre un texte difficile à lire, tandis qu’une dimension inadaptée peut déséquilibrer une page. Dans cette leçon, vous allez appliquer des couleurs et des unités simples à la page de présentation de l’atelier de jardinage. Vous apprendrez aussi à choisir une unité en fonction de ce que vous dimensionnez.

Choisir une notation de couleur

En CSS, vous pouvez indiquer une couleur avec une notation hexadécimale ou avec la fonction rgb(). Une notation hexadécimale commence par # et contient généralement six chiffres ou lettres : les deux premiers représentent le rouge, les deux suivants le vert et les deux derniers le bleu. Par exemple, #2f6b3b produit un vert sombre adapté à un titre ou à un lien.

Avec rgb(), vous précisez séparément les niveaux de rouge, de vert et de bleu, chacun compris entre 0 et 255. Ainsi, rgb(47, 107, 59) correspond à la même couleur que #2f6b3b. Gardez une palette limitée : une couleur principale pour les éléments importants, une couleur de fond et une couleur de texte suffisent pour commencer.

Appliquer une couleur au texte et au fond

La propriété color règle la couleur du texte. La propriété background-color définit la couleur de fond d’un élément. Vous pouvez les utiliser dans les règles CSS que vous avez appris à écrire et à cibler dans les leçons précédentes. Dans cet exemple, les titres et le lien reprennent le vert de l’atelier, tandis que la page conserve un fond clair.

/* Couleurs de la page de l’atelier */
body {
    color: #26352a;
    background-color: #f5f3e9;
}

h1,
h2 {
    color: #2f6b3b;
}

.contact {
    background-color: rgb(222, 235, 215);
}

a {
    color: #2459a6;
}

Le résultat attendu est une page au fond crème, avec un texte sombre, des titres verts et un bloc de contact vert pâle. Le lien bleu se distingue du texte courant. Une couleur de fond ne garantit pas, à elle seule, une bonne lisibilité : vérifiez toujours le contraste entre le texte et la surface qui se trouve derrière lui.

Choisir une unité pour une dimension

Une unité indique au navigateur comment interpréter une valeur de dimension ou d’espacement. L’unité px exprime une valeur fixe en pixels CSS : elle convient, par exemple, à une bordure fine ou à un petit espacement précis. Les unités rem et em sont relatives à la taille du texte : rem se rapporte à la taille de référence du document, tandis que em se rapporte à la taille de texte de l’élément concerné ou de son contexte.

Dans les dimensions relatives, 1rem correspond par défaut à la taille de texte de référence du navigateur, souvent 16 pixels. Vous pouvez donc exprimer un espacement de 24px par 1.5rem avec cette valeur par défaut, tout en laissant l’espacement suivre une modification de la taille de référence. Une valeur en em varie avec le contexte de texte : elle peut être utile pour dimensionner un élément en proportion du texte qui l’accompagne.

Le pourcentage exprime une proportion de la dimension de référence de l’élément parent. Par exemple, une largeur de 80% occupe quatre cinquièmes de cette dimension. Cette unité est utile pour éviter qu’un bloc ne prenne toute la largeur disponible, mais la valeur exacte dépend de l’espace offert par son parent. Pour cette leçon, nous l’utilisons uniquement pour illustrer une largeur ; la mise en page plus élaborée sera abordée plus tard.

/* Dimensions de base pour la page de l’atelier */
body {
    font-size: 1rem;
}

main {
    width: 80%;
}

h1 {
    margin-bottom: 1em;
}

.contact {
    border: 1px solid #b7c5ad;
    padding: 16px;
}

Ici, le contenu principal occupe 80 % de l’espace de son parent. Le titre reçoit un espace inférieur proportionnel à sa taille de texte, et le bloc de contact utilise un espacement fixe de 16 pixels ainsi qu’une bordure fine. Vous pouvez remplacer cette valeur par 1rem si vous souhaitez qu’elle évolue avec la taille de référence du document. Les dimensions choisies sont des points de départ : vérifiez le rendu réel dans votre navigateur.

Vérifier vos choix dans le navigateur

Enregistrez vos règles dans style.css, puis actualisez la page de l’atelier dans le navigateur. Vérifiez que les couleurs apparaissent sur les bons éléments et que le bloc de contact reste facile à lire. Si une dimension semble trop grande ou trop petite, modifiez une valeur à la fois : vous identifierez plus facilement l’effet de chaque unité.

À retenir

• Une couleur peut être écrite en hexadécimal ou avec rgb().
• Utilisez color pour le texte et background-color pour le fond.
• px convient aux valeurs fixes ; rem et em expriment des dimensions relatives au texte.
• Un pourcentage dépend de la dimension de référence de l’élément parent.
• Vérifiez le contraste et le rendu dans le navigateur plutôt que de choisir les valeurs sans les tester.