CSS, la couche visuelle du Web
HTML sert à structurer une page : titres, paragraphes, liens, images, formulaires. CSS, lui, sert à définir son apparence : couleurs, typographies, espacements, bordures, alignements et comportements visuels selon la taille de l’écran.
Une bonne manière de comprendre CSS consiste à le voir comme une liste de règles. Chaque règle cible un ou plusieurs éléments HTML, puis leur applique des déclarations visuelles. Si vous découvrez encore la structure HTML, commencez par consolider vos bases avec l’article sur la structure d’une page web en HTML, car CSS devient beaucoup plus clair quand le document HTML est bien organisé.
Voici une règle CSS minimale :
p {
color: #1f2937;
font-size: 18px;
}
Elle signifie : tous les éléments p doivent utiliser une couleur gris foncé et une taille de texte de 18 pixels.
Relier une feuille CSS à une page HTML
Dans un projet simple, on place généralement le CSS dans un fichier séparé, par exemple styles.css, puis on le relie depuis le document HTML avec une balise link dans le head.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Carte produit</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<article class="product-card">
<p class="product-card__eyebrow">Nouveauté</p>
<h2>Lampe de bureau</h2>
<p>Une lampe compacte avec intensité réglable pour travailler confortablement.</p>
<a class="button" href="/produits/lampe-bureau">Voir le produit</a>
</article>
</body>
</html>
Cette séparation est importante : HTML décrit le sens du contenu, CSS décrit sa présentation. C’est aussi un principe de base du progressive enhancement : la page doit rester compréhensible même si la couche visuelle ou JavaScript ne se charge pas correctement.
Comprendre les sélecteurs CSS
Un sélecteur indique à quels éléments une règle s’applique. Les trois sélecteurs de base sont le sélecteur de balise, le sélecteur de classe et le sélecteur d’identifiant.
/* Tous les paragraphes */
p {
line-height: 1.6;
}
/* Tous les éléments avec class="button" */
.button {
text-decoration: none;
}
/* L’élément avec id="main-title" */
#main-title {
letter-spacing: -0.03em;
}
En pratique, évitez de construire toute votre feuille CSS avec des identifiants. Une classe est plus souple, réutilisable et plus facile à maintenir. Par exemple, .button peut être appliquée sur un lien, un bouton ou un composant généré par Vue ou React.
<a class="button" href="/contact">Contact</a>
<button class="button" type="button">Ajouter au panier</button>
Les sélecteurs peuvent aussi être combinés :
.product-card h2 {
margin-block: 0 0.5rem;
}
.product-card .button {
margin-block-start: 1rem;
}
Ici, h2 n’est ciblé que lorsqu’il se trouve à l’intérieur d’un élément portant la classe .product-card. C’est pratique, mais attention à ne pas créer des sélecteurs trop longs, difficiles à surcharger. Pour aller plus loin sur ce sujet, vous pourrez ensuite lire l’article sur :is() et :where(), qui explique comment simplifier des sélecteurs plus avancés sans augmenter inutilement leur spécificité.
Couleurs : lisibilité avant décoration
CSS permet d’exprimer les couleurs avec des noms, de l’hexadécimal, du RGB, du HSL ou des variables CSS. Pour un projet réel, préférez des couleurs cohérentes et réutilisables.
:root {
--color-page: #f8fafc;
--color-surface: #ffffff;
--color-text: #0f172a;
--color-muted: #64748b;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
}
body {
background: var(--color-page);
color: var(--color-text);
}
Les variables CSS, appelées aussi custom properties, évitent de répéter les mêmes valeurs partout. Elles deviennent particulièrement utiles quand vous construisez un thème clair, un thème sombre ou un design system. Pour une approche plus structurée, consultez l’article sur les design tokens en CSS et TypeScript.
La règle à garder en tête : une couleur doit servir la compréhension. Un texte gris trop clair sur fond blanc peut devenir difficile à lire. Un bouton principal doit se distinguer des actions secondaires. Une bordure peut aider à séparer les zones, mais trop de contrastes visuels rendent l’interface confuse.
Polices, tailles et rythme de lecture
CSS contrôle aussi la typographie. La propriété font-family définit la police, font-size la taille du texte, font-weight son épaisseur et line-height l’espace entre les lignes.
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.5;
}
h2,
h3 {
line-height: 1.15;
}
.product-card__eyebrow {
color: var(--color-muted);
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
L’unité rem est souvent préférable à px pour les tailles de texte et les espacements, car elle dépend de la taille de police racine du document. Cela respecte mieux les préférences utilisateur, notamment pour l’accessibilité.
Évitez les textes trop petits, les lignes trop serrées et les blocs trop larges. Une interface agréable n’est pas seulement une interface jolie : c’est une interface lisible.
Marges, padding et modèle de boîte
CSS repose sur le modèle de boîte. Chaque élément peut avoir un contenu, du padding, une bordure et une marge.
* {
box-sizing: border-box;
}
.product-card {
max-width: 32rem;
padding: 1.5rem;
margin: 2rem auto;
background: var(--color-surface);
border: 1px solid #e2e8f0;
border-radius: 1rem;
}
padding ajoute de l’espace à l’intérieur de la boîte. margin ajoute de l’espace à l’extérieur. border dessine une limite autour de l’élément. border-radius arrondit les angles.
La déclaration box-sizing: border-box est très courante : elle rend le calcul des tailles plus intuitif, car la largeur déclarée inclut le padding et la bordure.
CSS propose aussi des propriétés logiques comme margin-block, padding-inline ou border-block. Elles s’adaptent mieux aux différentes directions d’écriture que margin-top ou padding-left. Pour comprendre cette logique, lisez l’article sur les propriétés logiques CSS.
Bordures, ombres et hiérarchie visuelle
Les bordures et les ombres servent à créer une hiérarchie entre les éléments. Elles peuvent indiquer qu’une carte est un bloc autonome, qu’un champ est actif ou qu’un bouton est interactif.
.product-card {
border: 1px solid #e2e8f0;
box-shadow: 0 16px 40px rgb(15 23 42 / 0.08);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding-inline: 1rem;
border: 1px solid transparent;
border-radius: 999px;
background: var(--color-primary);
color: white;
font-weight: 700;
}
.button:hover {
background: var(--color-primary-hover);
}
N’abusez pas des ombres très marquées. Elles doivent aider à comprendre la profondeur ou l’interactivité, pas attirer toute l’attention.
Classes et variantes de composants
Les classes deviennent puissantes quand elles décrivent des rôles visuels réutilisables : .button, .card, .alert, .layout, .badge. On peut ensuite ajouter des variantes.
<a class="button button--secondary" href="/catalogue">Retour au catalogue</a>
.button--secondary {
background: white;
color: var(--color-primary);
border-color: #bfdbfe;
}
.button--secondary:hover {
background: #eff6ff;
}
Cette logique est fréquente dans les architectures CSS de composants, que vous travailliez en HTML statique, Vue, React ou Web Components. L’idée n’est pas de multiplier les classes sans méthode, mais de rendre les intentions visibles : un bouton principal, un bouton secondaire, une carte mise en avant, un texte discret.
Un exemple complet
Voici une version complète du fichier CSS associé à la carte produit :
:root {
--color-page: #f8fafc;
--color-surface: #ffffff;
--color-text: #0f172a;
--color-muted: #64748b;
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
padding: 2rem;
background: var(--color-page);
color: var(--color-text);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.5;
}
.product-card {
max-width: 32rem;
margin-inline: auto;
padding: 1.5rem;
background: var(--color-surface);
border: 1px solid #e2e8f0;
border-radius: 1rem;
box-shadow: 0 16px 40px rgb(15 23 42 / 0.08);
}
.product-card__eyebrow {
margin-block: 0 0.75rem;
color: var(--color-muted);
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.product-card h2 {
margin-block: 0 0.5rem;
font-size: clamp(1.5rem, 4vw, 2.25rem);
line-height: 1.1;
}
.product-card p {
margin-block: 0;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
margin-block-start: 1.25rem;
padding-inline: 1rem;
border-radius: 999px;
background: var(--color-primary);
color: white;
font-weight: 700;
text-decoration: none;
}
.button:hover {
background: var(--color-primary-hover);
}
.button:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 3px;
}
La règle :focus-visible est importante : elle rend la navigation au clavier visible. C’est un détail souvent oublié par les débutants, mais essentiel pour construire des interfaces accessibles.
Les erreurs fréquentes à éviter
La première erreur consiste à styliser uniquement avec des balises globales. Par exemple, modifier tous les div ou tous les h2 d’un site finit vite par créer des effets de bord. Préférez des classes explicites quand vous stylisez un composant.
La deuxième erreur consiste à utiliser trop vite !important. Cette instruction force une déclaration à gagner dans la cascade, mais elle rend ensuite le CSS plus difficile à faire évoluer. Avant d’y recourir, vérifiez votre sélecteur, l’ordre de vos règles et la structure de votre feuille. L’article sur les cascade layers CSS montre une méthode plus robuste pour organiser les priorités.
La troisième erreur consiste à confondre décoration et conception d’interface. Une bordure, une couleur ou une ombre doit répondre à une intention : attirer l’attention, regrouper des informations, indiquer une action, améliorer la lisibilité.
Conclusion
Apprendre CSS, ce n’est pas mémoriser toutes les propriétés. C’est d’abord comprendre comment cibler les bons éléments, appliquer des styles lisibles, gérer les espacements et construire progressivement une hiérarchie visuelle cohérente.
Avec les couleurs, les polices, les marges, les bordures, les classes et les sélecteurs, vous possédez déjà les bases nécessaires pour transformer une page HTML brute en interface agréable. Ensuite, vous pourrez approfondir des sujets plus avancés comme le responsive design, les variables CSS, les composants, les animations ou l’architecture CSS.