CSS : de quoi parle-t-on ?
Jusqu’ici, vos pages HTML étaient fonctionnelles mais austères : le navigateur applique un style par défaut à chaque balise (les titres sont en gras, les liens sont bleus et soulignés…). Le CSS vous donne le contrôle total sur l’apparence de votre page ; c’est le langage qui gère l’apparence de vos pages : couleurs, polices, marges, mise en page, animations…
Le principe fondamental du Web repose sur cette séparation :
- HTML = le fond, la structure, le sens (quels sont les contenus et leur rôle)
- CSS = la forme, le style, la présentation (comment ces contenus s’affichent)
Cette séparation rend vos pages plus accessibles, plus faciles à maintenir et adaptables à tout type d’écran. Un même fichier HTML peut être habillé de manières très différentes simplement en changeant de feuille CSS.
La syntaxe CSS en un coup d’œil
Avant de voir comment brancher le CSS, comprenons sa syntaxe de base. Une règle CSS se compose toujours de trois éléments : un sélecteur (quel élément cibler), une propriété (quel aspect modifier) et une valeur (comment le modifier).
/* Anatomie d'une règle CSS */
sélecteur {
propriété: valeur;
propriété: valeur;
}/* Exemple concret : je stylise tous les paragraphes */
p {
color: navy; /* couleur du texte */
font-size: 1.1rem; /* taille de la police */
line-height: 1.6; /* hauteur de ligne */
}- Le sélecteur est suivi d’accolades
{ }qui contiennent les propriétés - Chaque propriété est suivie de deux-points
:puis de sa valeur - Chaque déclaration se termine par un point-virgule
; - Les commentaires s’écrivent entre
/*et*/— c’est la seule syntaxe de commentaire valide en CSS
Méthode 1 : la feuille de style externe (recommandée)
Le principe : vous créez un fichier séparé (par exemple style.css), puis vous le liez à votre page HTML grâce à la balise link placée dans le head. C’est la méthode à privilégier dans la majorité des cas. Elle sépare clairement le HTML du CSS, et permet de partager un même fichier CSS entre plusieurs pages.
<!-- Dans le fichier HTML -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page</title>
<!-- Je lie ma feuille de style externe -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenue</h1>
<p>Ce paragraphe sera stylisé par le fichier style.css</p>
</body>
</html>/* Dans le fichier style.css */
h1 {
color: navy;
font-size: 2rem;
}
p {
color: #333;
line-height: 1.6;
}Quelques règles pour le fichier CSS externe
- La balise
linkest une balise simple (auto-fermante) - L’attribut
rel="stylesheet"indique au navigateur qu’il s’agit d’une feuille de style - L’attribut
hreffonctionne comme pour les images : il suit les mêmes règles de chemin relatif - Donnez à votre fichier un nom simple et sans espaces :
style.css,main.css,theme.css - Rangez-le au même niveau que votre fichier HTML, ou dans un dossier dédié (
css/style.css)
<!-- Si le fichier CSS est au même niveau que le HTML -->
<link rel="stylesheet" href="style.css">
<!-- Si le fichier CSS est dans un dossier css/ -->
<link rel="stylesheet" href="css/style.css">
<!-- Vous pouvez lier plusieurs feuilles de style -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">Pourquoi c’est la meilleure méthode
- Réutilisable : un même fichier CSS peut habiller toutes les pages de votre site
- Maintenable : pour changer la couleur de tous vos titres, vous modifiez une seule ligne à un seul endroit
- Performant : le navigateur met le fichier CSS en cache, il n’est téléchargé qu’une fois
- Propre : votre HTML reste léger et lisible, sans styles mélangés au contenu
Méthode 2 : la balise style dans le head
Vous pouvez écrire du CSS directement dans le head de votre page HTML, à l’intérieur d’une balise style. C’est une solution rapide quand vous n’avez qu’une seule page ou très peu de styles à déclarer.
<head>
<meta charset="UTF-8">
<title>Ma page</title>
<!-- Je déclare mes styles directement dans le head -->
<style>
p {
color: yellowgreen;
font-style: italic;
}
h1 {
text-align: center;
}
</style>
</head>- La balise
styleest une balise double (ouvrante et fermante) - Les styles déclarés ici ne s’appliquent qu’à cette page
- Si vous avez plusieurs pages, vous devrez dupliquer le code dans chacune — c’est pourquoi cette méthode est déconseillée pour un site multi-pages
Méthode 3 : le style inline (en dernier recours)
Vous pouvez ajouter des propriétés CSS directement à l’intérieur d’une balise HTML, via l’attribut style. Le CSS s’applique alors uniquement à cet élément précis.
<body>
<!-- Le style s'applique uniquement à CE paragraphe -->
<p style="font-size: 1.5rem; color: tomato; text-transform: uppercase;">
Ce paragraphe a un style inline
</p>
<!-- Celui-ci n'est pas affecté -->
<p>Ce paragraphe garde le style par défaut</p>
</body>Pourquoi éviter cette méthode
- Elle mélange le HTML et le CSS dans le même fichier, ce qui casse le principe de séparation fond/forme
- Elle est impossible à réutiliser : si vous voulez le même style sur 10 paragraphes, vous devez le copier 10 fois
- Elle alourdit le code HTML, le rendant difficile à lire et à maintenir
- Elle est prioritaire sur toutes les autres méthodes (feuille externe, balise
style), ce qui peut créer des conflits difficiles à comprendre
Récapitulatif : quelle méthode choisir ?
En formation, nous utiliserons parfois la balise style dans le head pour gagner du temps sur les exercices. Mais dans un projet réel, la feuille de style externe est toujours la bonne réponse.
| Méthode | Syntaxe | Réutilisable | Recommandée |
|---|---|---|---|
| Feuille externe | <link rel="stylesheet" href="style.css"> | Oui, sur toutes les pages | ✅ Toujours |
| Balise <style> | <style>...</style> dans le head | Non, page unique | ⚠️ Ponctuellement |
| Style inline | style="..." dans la balise | Non, élément unique | ❌ À éviter |