Donner du style à une page HTML grâce au CSS

Par Sam Accolade · Publié le 11 novembre 2017 · Mis à jour le 11 août 2026

Avec le HTML, nous avons appris à structurer et à donner du sens au contenu d'une page. Il est temps de passer à la mise en forme avec le CSS. Dans ce cours, je vous montre les trois façons d'appliquer du CSS à une page, la syntaxe d'une règle, les sélecteurs de base, et je vous donne une première clé de lecture de la spécificité : quand deux règles se contredisent, laquelle gagne, et pourquoi. Si le HTML est encore flou pour vous, commencez par les bases pour bien débuter en HTML, tout ce qui suit s'appuie dessus.

Un point de méthode avant de commencer : tous les comportements décrits dans cet article ont été vérifiés pendant la rédaction dans Chrome (version 151), en lisant la couleur réellement calculée par le navigateur. Quand j'écris « ce paragraphe s'affiche en bleu », ce n'est pas une supposition, c'est une mesure.

Les trois façons d'appliquer du CSS

1. L'attribut style, directement sur une balise

La première méthode consiste à poser le style directement sur la balise concernée, avec l'attribut style. On parle de style « inline » :

<p style="color: red;">Ce paragraphe est écrit en rouge.</p>

C'est la méthode que je vous recommande le moins. Elle mélange le fond (le HTML) et la forme (le CSS), elle oblige à répéter le même code sur chaque balise, et votre fichier devient vite illisible. Vous verrez plus bas qu'elle a en plus un effet de bord gênant : un style inline est très difficile à contredire depuis une feuille de style.

2. La balise style, dans le head

Deuxième méthode : regrouper les règles dans un élément <style> placé dans l'en-tête du document, dont je vous ai déjà parlé dans le cours sur les balises à connaître pour le head :

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

C'est déjà mieux : les styles sont rassemblés au même endroit et séparés du contenu. Mais ils ne valent que pour cette page. Si votre site compte dix pages, il faut copier le même bloc dix fois, et le modifier dix fois à chaque changement.

3. Le fichier .css lié : la méthode que je vous recommande

La troisième méthode, celle utilisée sur la quasi-totalité des vrais sites, consiste à écrire le CSS dans un fichier séparé, par exemple styles.css, puis à le relier à la page avec une balise <link> dans le head :

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

L'attribut rel avec la valeur stylesheet indique au navigateur que le fichier pointé par href est une feuille de style à appliquer. J'ai vérifié le mécanisme pendant la rédaction : une règle p { color: teal; } placée dans un fichier styles.css externe colore bien les paragraphes de la page en rgb(0, 128, 128), exactement comme si elle était écrite dans la page. Le gros avantage : un seul fichier CSS peut mettre en forme toutes les pages de votre site. Une modification dans ce fichier, et tout le site suit. C'est cette méthode que j'utilise depuis mes débuts en 2017, et c'est celle que je vous recommande d'adopter tout de suite.

La syntaxe d'une règle CSS

Une règle CSS est toujours composée des trois mêmes ingrédients :

le sélecteur : il désigne les éléments HTML à mettre en forme ;
la propriété : ce que vous voulez changer, par exemple color pour la couleur du texte ou font-size pour sa taille ;
la valeur : ce que la propriété doit valoir, par exemple red ou 18px.

p {
  color: red;
}

Une règle CSS : sélecteur, puis paires propriété : valeur ; entre accolades.

Retenez la ponctuation : deux points entre la propriété et la valeur, point-virgule à la fin de chaque déclaration, accolades autour du bloc. Il existe des centaines de propriétés et il est inutile de les apprendre par cœur : vous découvrirez les plus utiles au fil des cours, comme celles qui gèrent les couleurs et les fonds en CSS.

Les sélecteurs de base

Le sélecteur d'élément

Le nom d'une balise HTML, écrit sans chevrons, sélectionne tous les éléments de ce type dans la page. Avec le code suivant, j'ai mesuré que les deux paragraphes s'affichent bien en rgb(255, 0, 0), le rouge pur :

p {
  color: red;
}

<p>Premier paragraphe : rouge.</p>
<p>Deuxième paragraphe : rouge aussi.</p>

C'est puissant, mais peu précis : impossible avec ce seul sélecteur de ne colorer qu'un paragraphe sur deux. Signalons aussi le sélecteur universel *, qui cible tous les éléments de la page sans exception ; on s'en sert surtout pour des remises à zéro globales.

Le sélecteur de classe : .maclasse

Pour cibler seulement certains éléments, on leur donne un attribut class dans le HTML, puis on les sélectionne en CSS avec un point suivi du nom de la classe :

<p class="note">Seul ce paragraphe est concerné.</p>

.note {
  color: green;
}

Une même classe peut être posée sur autant d'éléments que vous voulez, et un élément peut porter plusieurs classes séparées par des espaces. C'est le sélecteur que vous utiliserez le plus.

Le sélecteur d'id : #monid

L'attribut id fonctionne sur le même principe, avec deux différences : un id doit être unique dans la page (deux éléments ne peuvent pas porter le même), et on le sélectionne avec un # à la place du point :

<p id="intro">Le paragraphe d'introduction, unique dans la page.</p>

#intro {
  color: blue;
}

Et pour styler un simple mot au milieu d'un paragraphe, ou regrouper plusieurs éléments dans un ensemble commun ? C'est le rôle des balises génériques span et div, que je vous présente dans le cours sur les balises de type block et inline : elles ne changent rien à l'affichage par elles-mêmes, mais elles offrent un support idéal pour une classe ou un id.

Introduction à la spécificité : quelle règle gagne ?

Question inévitable dès qu'on écrit plus de trois règles : que se passe-t-il quand plusieurs règles ciblent le même élément avec des valeurs contradictoires ? Le navigateur applique un système de priorité appelé la spécificité. Voici l'expérience exacte que j'ai menée dans Chrome pendant la rédaction. Le HTML :

<p id="intro" class="note">De quelle couleur ce paragraphe s'affiche-t-il ?</p>

Et le CSS, avec trois règles qui se contredisent volontairement :

p {
  color: red;
}

.note {
  color: green;
}

#intro {
  color: blue;
}

Résultat mesuré : le paragraphe s'affiche en bleu (rgb(0, 0, 255)). La règle #intro gagne, car un sélecteur d'id est plus spécifique qu'un sélecteur de classe. Si je supprime la règle #intro, le paragraphe passe au vert (rgb(0, 128, 0)) : la classe bat le sélecteur d'élément. Et si je pose un style inline style="color: crimson;" directement sur la balise, le paragraphe s'affiche en rgb(220, 20, 60) alors même qu'une règle #id tente de le colorer autrement : l'attribut style passe devant tout le reste. D'où mon conseil du début : évitez-le, il vous bloquera.

Plus on va vers la droite, plus la règle est prioritaire : l'inline bat l'id, qui bat la classe, qui bat l'élément.

Dernier cas, tout aussi important : quand deux règles ont exactement la même spécificité, c'est la dernière écrite dans le fichier CSS qui l'emporte. Mesuré avec deux classes .a { color: purple; } puis .b { color: orange; } sur un même élément : il s'affiche en orange (rgb(255, 165, 0)), parce que .b vient après .a dans la feuille de style. L'ordre des classes dans l'attribut class du HTML, lui, ne change rien. C'est une simple introduction : la spécificité a des règles de calcul plus fines que nous approfondirons plus tard, mais cette hiérarchie couvre déjà l'immense majorité des cas que vous rencontrerez en tant que débutant.

Écrire un commentaire en CSS

Comme en HTML, vous pouvez laisser dans vos fichiers .css des annotations que le navigateur ignore. La syntaxe est différente de celle du HTML :

/* Ceci est un commentaire, il n'a aucun effet sur la page */
p {
  color: red;
}

Prenez l'habitude d'en écrire pour organiser vos feuilles de style : quand j'ai commencé à apprendre le soir après le travail, mes propres commentaires m'ont souvent évité de longues minutes de relecture le week-end suivant.

Ce qu'il faut retenir

Trois façons d'appliquer du CSS : inline, balise <style>, fichier .css lié. Privilégiez le fichier lié.
Une règle = un sélecteur, des propriétés, des valeurs, avec la ponctuation { : ; }.
Sélecteurs de base : le nom de balise cible tous les éléments du type, .classe cible un groupe choisi, #id cible un élément unique.
Spécificité : inline bat id, qui bat classe, qui bat élément ; à égalité, la dernière règle écrite gagne.

Vous avez maintenant tout ce qu'il faut pour écrire vos premières vraies règles. Prochaine étape logique : apprendre à mettre en forme le texte en CSS, avec les polices, les tailles et les alignements. N'hésitez pas à laisser un commentaire si un point mérite d'être précisé, Sam.