Introduction au CSS
Utilisez CSS pour styliser des pages web : couleurs, polices, mises en page. Apprenez à mettre en forme vos pages avec CSS.
Les feuilles de style en cascade (CSS) sont le langage qui contrôle l'apparence d'une page web. Tandis que HTML définit le contenu et la structure d'une page (titres, paragraphes, listes, liens), CSS décrit sa présentation — couleurs, polices, espacements, tailles et mise en page. Les deux fonctionnent ensemble : HTML est le squelette, CSS est la peau.
CSS a été créé par le World Wide Web Consortium (W3C) et est désormais un standard ouvert pris en charge par tous les navigateurs modernes.
Cette page explique ce qu'est CSS, pourquoi il existe, comment une règle CSS s'écrit, et où aller ensuite.
Pourquoi CSS existe
Aux débuts du web, la mise en forme était directement intégrée dans HTML via des attributs et des balises de présentation. Cela rendait les pages difficiles à maintenir : changer une couleur impliquait de modifier chaque élément sur chaque page. CSS résout ce problème en séparant le contenu de la présentation. Vous rédigez votre balisage une seule fois, puis vous contrôlez son apparence depuis un ensemble de règles distinct.
Cette séparation vous offre trois grands avantages :
- Une seule modification, appliquée partout. Une feuille de style externe unique peut styliser toutes les pages d'un site. Mettez à jour un seul fichier et l'ensemble du site change.
- Un HTML plus propre et plus léger. Votre balisage reste centré sur le sens, ce qui est plus facile à lire et meilleur pour l'accessibilité et le référencement.
- Un design réutilisable et cohérent. Les mêmes règles s'appliquent automatiquement à chaque élément correspondant, ainsi les boutons, les titres et les liens ont la même apparence sur tout le site.
À quoi ressemble une règle CSS
Une règle CSS comporte deux parties : un sélecteur qui choisit les éléments à styliser, et un bloc de déclaration (entre { }) qui liste ce qui doit être modifié. Chaque déclaration est une paire propriété: valeur;.
p {
color: blue;
font-size: 16px;
}Dans cette règle :
pest le sélecteur — il cible chaque élément<p>(paragraphe).coloretfont-sizesont les propriétés — les aspects stylisés.blueet16pxsont les valeurs — ce à quoi chaque propriété est définie.- Le point-virgule
;termine chaque déclaration ; les accolades{ }les regroupent.
Voici une page complète qui utilise CSS pour styliser son titre et son paragraphe :
<!DOCTYPE html>
<html>
<head>
<title>My first CSS page</title>
<style>
h1 {
color: #1c87c9;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>Le titre devient bleu et centré, et le paragraphe devient gris et plus grand — sans toucher au texte lui-même.
Où vit CSS
Vous pouvez appliquer CSS de trois façons, et vous les rencontrerez toutes dans le chapitre Comment ajouter du CSS :
- Externe — des règles enregistrées dans un fichier
.cssséparé et liées depuis la page. C'est l'approche standard pour les vrais sites, car un seul fichier stylise de nombreuses pages. - Interne — des règles placées dans un élément
<style>dans le<head>de la page (comme dans l'exemple ci-dessus). - Inline — un attribut
stylesur un seul élément, utilisé pour des ajustements ponctuels rapides.
Où aller ensuite
Maintenant que vous savez ce qu'est CSS, continuez avec les fondamentaux :
- Syntaxe CSS — l'anatomie d'une règle en détail.
- Comment ajouter du CSS — styles inline, internes et externes.
- Sélecteurs CSS — toutes les façons de cibler des éléments.
- CSS Id et Class — cibler des éléments spécifiques par nom.