Comment définir des styles CSS pour un document HTML

Le CSS contrôle l'apparence d'un document HTML, mais le navigateur doit savoir où trouver ces règles de style. Il existe trois façons d'associer du CSS à une page HTML, et chacune convient à une situation différente :

Style inline — placez les règles directement sur un seul élément via son attribut style.
Style interne (embarqué) — rassemblez les règles dans un élément <style> situé dans la section <head> de la page.
Style externe — conservez les règles dans un fichier .css séparé et liez-le à la page.

Cette page couvre les trois méthodes, indique quand utiliser chacune d'elles, et explique comment elles interagissent lorsque plusieurs d'entre elles ciblent le même élément. Si vous découvrez comment une règle CSS est construite (sélecteur, propriété, valeur), lisez d'abord Syntaxe CSS.

Style Inline

Un style inline est écrit directement sur un élément via son attribut style. Les règles s'appliquent uniquement à cet élément. L'attribut contient une ou plusieurs déclarations (propriété: valeur) séparées par des points-virgules — aucun sélecteur ni accolade n'est nécessaire, car l'élément auquel la règle s'applique est celui sur lequel elle est écrite.

Quand l'utiliser : pour des ajustements ponctuels rapides ou pour des styles générés dynamiquement (par exemple par JavaScript). Évitez-le pour le style général — la règle étant liée à l'élément, vous ne pouvez pas la réutiliser et elle est difficile à maintenir sur une grande page.

Exemple de création d'un style inline pour un document HTML :

Exemple de style CSS inline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 style="color:#1c87c9">Some heading</h2>
    <p style="color:#8ebf42; font-size:15px">Some paragraph</p>
  </body>
</html>

Essayez vous-même »

Résultat

Parcourons cet exemple. Sur la balise <h2> nous avons écrit style="color:#1c87c9", donc le texte de ce titre est affiché en bleu #1c87c9.

Nous avons fait de même sur la balise <p> avec style="color:#8ebf42; font-size:15px". Les deux déclarations sont séparées par un point-virgule : le texte entre les balises ouvrante <p> et fermante </p> est coloré en #8ebf42 (vert) et dimensionné à 15px.

Style Interne

Avec un style interne (ou embarqué), le CSS d'une page est placé dans un élément <style> dans le <head> de la page. Contrairement aux styles inline, vous écrivez ici des règles complètes — un sélecteur suivi d'un bloc de déclarations entre accolades — permettant ainsi à une règle de cibler de nombreux éléments à la fois.

Quand l'utiliser : pour une page unique qui nécessite un style propre et qui n'est pas partagé avec le reste du site, ou pour un prototypage rapide. L'inconvénient est que les règles n'affectent que cette seule page. Pour styliser plusieurs pages de la même façon, vous devriez copier le bloc <style> dans chacune d'elles — ce qui est exactement le problème que résolvent les feuilles de style externes.

Dans l'exemple ci-dessous, la règle body peint l'arrière-plan de la page en #1c87c9 (bleu) et la règle p rend le texte des paragraphes blanc.

Exemple de création d'un style interne pour un document HTML :

Exemple de style CSS interne

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      p {
        color: white;
      }
    </style>
  </head>
  <body>
    <p>Some information</p>
  </body>
</html>

Essayez vous-même »

Style Externe

Une feuille de style externe conserve tout le CSS dans son propre fichier, séparé du HTML. Il s'agit de l'approche standard pour les vrais sites web, car chaque page peut faire référence au même fichier et partager un aspect cohérent. Vous pouvez créer le fichier avec n'importe quel éditeur de texte ou éditeur HTML tel que Notepad ou Sublime Text.

Le fichier ne contient que du CSS — aucune balise HTML — et est enregistré avec l'extension .css. Pour l'associer à une page, ajoutez une balise <link> dans la section <head>. Chaque page devant utiliser ces styles a besoin de son propre <link>.

Quand l'utiliser : presque toujours pour un site multi-pages. Les règles étant regroupées en un seul endroit, modifier une couleur ou une police dans ce unique fichier .css met à jour toutes les pages simultanément, et le navigateur peut mettre le fichier en cache pour ne le télécharger qu'une seule fois.

Exemple de création d'un style externe pour un document HTML :

Exemple de style CSS externe

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Un fichier style.css correspondant pourrait ressembler à ceci :

body {
  background-color: #1c87c9;
}
p {
  color: white;
}

Quelle méthode utiliser ?

En règle générale :

Utilisez une feuille de style externe pour presque tous les projets réels — elle est réutilisable, mise en cache et facile à maintenir.
Utilisez des styles internes pour une page unique ou une démonstration rapide.
Utilisez des styles inline uniquement pour un ajustement ponctuel que vous ne pouvez pas exprimer autrement (souvent une valeur calculée dynamiquement).

Comment les méthodes interagissent

Lorsque le même élément est ciblé par plusieurs méthodes, le navigateur doit décider quelle déclaration l'emporte. Toutes choses égales par ailleurs, l'ordre de priorité est :

Les styles inline (priorité la plus haute).
Les règles internes et externes, déterminées par la spécificité du sélecteur et, en cas d'égalité de spécificité, par la règle qui apparaît en dernier.

Ainsi, un style="color:red" inline écrase une règle p { color: blue; } provenant d'une feuille de style. Ce système de priorité est appelé la cascade — le « C » dans CSS.

Entraînement

Pratique

Quelles sont les façons d'inclure du CSS dans HTML ?