🎞️ Voir le diaporama

CSS — Typographie, couleurs et bonnes pratiques¶

Ce dernier chapitre rassemble ce qui fait la différence entre une page « qui marche » et une page soignée : une typographie lisible, des couleurs maîtrisées, et surtout des habitudes de travail qui gardent votre CSS propre et durable. C’est aussi ici que se jouent l’accessibilité et la maintenabilité, deux qualités souvent invisibles mais déterminantes.

Typographie¶

Le texte représente l’essentiel du contenu d’un site : sa lisibilité prime sur tout le reste.

Les propriétés essentielles¶

Propriété	Rôle	Exemple
`font-family`	Choix de la police	`Arial, sans-serif`
`font-size`	Taille du texte	`16px`, `2rem`
`font-weight`	Graisse	`normal`, `bold`, `700`
`line-height`	Interligne	`1.6`
`text-align`	Alignement	`left`, `center`, `right`

Polices système et Google Fonts¶

Certaines polices sont présentes sur quasiment tous les appareils : ce sont les polices sûres, qu’on indique avec une famille de secours générique (serif, sans-serif).

font-family: Arial, sans-serif;
font-family: Georgia, serif;

La liste se lit de gauche à droite : le navigateur prend la première police disponible. Le mot-clé final (sans-serif ici) est le filet de sécurité si aucune n’est trouvée.

Pour aller au-delà, Google Fonts propose un large catalogue de polices gratuites. La marche à suivre tient en trois temps : choisir la police sur https://fonts.google.com, copier le lien fourni dans le <head>, puis l’utiliser dans le CSS.

body {
    font-family: 'Roboto', sans-serif;
}

Une recommandation de sobriété : deux à trois polices par site, maximum. Au-delà, l’ensemble devient incohérent et le chargement s’alourdit.

Tailles et interligne¶

Quelques valeurs de référence donnent une hiérarchie lisible :

body { font-size: 16px; }
h1   { font-size: 32px; }
h2   { font-size: 24px; }

L”interligne (line-height) compte autant que la taille. Un texte courant respire avec un interligne d’environ 1.6 ; les titres, plus courts, se contentent d’un interligne plus serré, autour de 1.2.

p  { line-height: 1.6; }
h1 { line-height: 1.2; }

Notez que line-height s’exprime ici sans unité : c’est un multiplicateur de la taille de police, ce qui le fait s’adapter automatiquement à chaque élément.

Couleurs et effets¶

Les formats de couleur¶

Le CSS accepte plusieurs notations pour une même couleur. L”hexadécimal est le plus répandu :

color: #ff0000;  /* Rouge */
color: #333;     /* Gris foncé (forme courte de #333333) */

Le format RGB, et surtout sa variante RGBA, ajoute la transparence via un canal alpha allant de 0 (transparent) à 1 (opaque) :

color: rgb(255, 0, 0);            /* Rouge */
background: rgba(0, 0, 0, 0.5);   /* Noir à 50 % d'opacité */

RGBA est précieux dès qu’on veut laisser transparaître ce qui se trouve derrière un élément — un calque sombre sur une image, par exemple.

Dégradés¶

Un dégradé se déclare comme une image de fond générée par le CSS :

/* Dégradé horizontal */
background: linear-gradient(to right, #667eea, #764ba2);

/* Dégradé en diagonale */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Plusieurs couleurs */
background: linear-gradient(to right, red, yellow, green);

Le premier paramètre donne la direction (to right, ou un angle comme 135deg), les suivants la suite des couleurs.

Ombres¶

Deux propriétés ajoutent de la profondeur, l’une pour les éléments, l’autre pour le texte :

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Les valeurs se lisent dans l’ordre : décalage horizontal, décalage vertical, flou, puis couleur. Une ombre discrète (faible opacité, léger flou) suffit presque toujours : les ombres marquées datent vite.

Les variables CSS¶

Les variables CSS permettent de définir une valeur une seule fois et de la réutiliser partout. On les déclare généralement sur :root (la racine du document) :

:root {
    --primary: #3498db;
    --secondary: #2ecc71;
    --text: #2c3e50;
}

On les emploie ensuite avec la fonction var() :

.button {
    background-color: var(--primary);
    color: white;
}

L’intérêt est considérable sur un vrai projet : changer la couleur principale d’un site se fait alors en un seul endroit, au lieu de chercher et remplacer la valeur dans toute la feuille de styles.

Bonnes pratiques¶

Organiser sa feuille de styles¶

Un CSS bien rangé se relit et se modifie sans douleur. Un ordre logique, du plus général au plus spécifique, fait des merveilles :

/* Reset et variables */
* { box-sizing: border-box; }
:root { --primary: #3498db; }

/* Éléments de base */
body { font-family: Arial, sans-serif; }

/* Layout */
.container { max-width: 1200px; }

/* Composants */
.button { padding: 10px 20px; }

/* Media queries */
@media (min-width: 768px) { }

Nommer ses classes¶

Un bon nom décrit le rôle de l’élément, pas son apparence (une classe .rouge devient absurde le jour où la couleur change) :

/* À éviter */
.btn1 { }
.box { }

/* Préférable */
.button-primary { }
.product-card { }

La convention dominante : tout en minuscules, les mots séparés par des tirets.

.main-navigation { }

La méthodologie BEM¶

BEM (Block, Element, Modifier) est une convention de nommage répandue pour structurer ses classes de façon prévisible. Elle distingue le bloc, ses éléments internes, et ses variantes :

.card { }                /* Block : le composant */
.card__title { }         /* Element : une partie du bloc (double souligné) */
.card--featured { }      /* Modifier : une variante (double tiret) */

<div class="card card--featured">
    <h3 class="card__title">Titre</h3>
</div>

L’avantage : en lisant une classe, on sait immédiatement à quel composant elle appartient et quel rôle elle joue, ce qui évite les conflits de noms à grande échelle.

Accessibilité et validation¶

Un site soigné est un site utilisable par tous. Deux points de vigilance reviennent systématiquement : le contraste entre le texte et son fond, et la taille du texte principal.

Méthode : Vérifier le contraste et la taille

Visez un ratio de contraste d’au moins 4.5:1 pour le texte normal (un outil comme https://webaim.org/resources/contrastchecker/ le calcule pour vous) et une taille d’au moins 16px pour le texte principal. Ces deux réglages, simples à respecter, rendent un site lisible pour le plus grand nombre — y compris en plein soleil ou avec une vue fatiguée.

Enfin, comme pour le HTML, pensez à valider votre CSS avec l’outil officiel du W3C : https://jigsaw.w3.org/css-validator/. Un code validé est un code qui se comportera de façon prévisible sur l’ensemble des navigateurs.

Pour conclure¶

Vous disposez maintenant de l’ensemble des fondations du HTML et du CSS : structurer un document avec du sens, le mettre en forme, le disposer avec Flexbox et Grid, l’adapter à tous les écrans, et le finaliser avec une typographie et des couleurs soignées. Le meilleur moyen d’ancrer tout cela reste la pratique — c’est tout l’objet des TP et du mini-projet. Bon code !