Docs CSS exécutables : CSS externe

Q: Comment lier un fichier CSS à une page HTML ?

Ajoutez dans le . Le href est un chemin relatif au fichier HTML : css/styles.css pointe vers un dossier css placé à côté, et /styles.css part de la racine du site.

Q: Pourquoi mon CSS externe ne fonctionne-t-il pas ?

Les causes habituelles sont un mauvais chemin dans href (cherchez un 404 dans l'onglet Réseau), un rel="stylesheet" manquant, des balises écrites dans le fichier .css, ou une règle placée plus loin qui écrase la vôtre. Un rechargement forcé écarte l'hypothèse d'une ancienne copie en cache.

Le CSS externe en une ligne

Le CSS externe est un fichier .css séparé. Vous le liez depuis le <head> de chaque page qui en a besoin :

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

Le fichier lui-même contient des règles CSS simples, sans balises HTML autour :

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

L'aperçu ci-dessous n'a pas de second fichier à charger, il place donc le même CSS dans un élément <style>. C'est du CSS interne, et le rendu est exactement celui du fichier lié :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

CSS interne : l'élément style

Le CSS interne (aussi appelé CSS intégré) est un élément <style> à l'intérieur de la page. Placez-le dans le <head> pour que les styles soient connus avant l'affichage du body. Il s'applique à toute la page, et ses règles utilisent des sélecteurs, ce que les attributs style inline ne peuvent pas faire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Survolez une étiquette : :hover fonctionne ici parce que c'est une vraie règle. La troisième méthode, l'attribut style, est traitée sur la page du CSS inline.

CSS interne ou externe

	Externe (`<link>`)	Interne (`<style>`)
Emplacement	Un fichier `.css`	Dans la page HTML
Portée	Toutes les pages qui le lient	Une seule page
Cache	Téléchargé une fois, réutilisé sur toutes les pages	Renvoyé avec chaque page
Changer l'apparence d'un site	Modifier un fichier	Modifier chaque page
Requête supplémentaire	Oui, une par fichier	Non
Adapté à	Les vrais sites web	Démos, pages uniques, e-mails HTML, CSS critique

La spécificité est la même dans les deux cas : une règle dans un élément <style> et la même règle dans un fichier lié pèsent exactement autant. En cas d'égalité, celle qui vient plus loin dans le document l'emporte.

L'ordre : la dernière feuille de style gagne

Les feuilles de style sont lues dans l'ordre du document, <link> comme <style>. Entre deux règles de même spécificité, la dernière l'emporte. Les deux blocs <style> ci-dessous représentent un fichier lié suivi d'une surcharge propre à la page :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Le bouton garde le padding et le texte blanc de la première règle et ne prend que le fond de la seconde. C'est pourquoi la feuille de style d'un site se place après celle d'un framework : liez d'abord la bibliothèque avec <link>, puis la vôtre.

Les chemins de fichiers dans href

Le href d'un <link> est une URL, résolue par rapport à l'emplacement du fichier HTML.

href	Charge
`styles.css`	Un fichier dans le même dossier que la page
`css/styles.css`	Un dossier `css` à côté de la page
`../styles.css`	Un dossier au-dessus
`/styles.css`	Depuis la racine du site
`https://example.com/a.css`	Une URL complète sur un autre serveur

Pour un site dont les pages sont à des profondeurs différentes, la forme relative à la racine (/css/styles.css) garde un chemin valable sur toutes les pages.

Feuilles de style pour l'impression et d'autres médias

Un attribut media limite une feuille de style aux conditions qui correspondent. <link> et <style> l'acceptent tous les deux :

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

L'aperçu est un écran, donc la bannière s'affiche. Sur une vraie page, elle disparaît à l'impression, et dans les DevTools vous obtenez le même résultat en émulant le type de média print (panneau Rendering).

Erreurs courantes

Mauvais chemin. Une faute de frappe dans href ne charge rien, et la page s'affiche sans style. Ouvrez les DevTools, onglet Réseau, et cherchez un 404 sur le fichier .css.
Oublier rel="stylesheet". Sans lui, <link href="styles.css"> ne charge pas de feuille de style.
Du HTML dans le fichier .css. Un fichier .css ne contient que des règles. Des balises <style> à l'intérieur ne sont pas du CSS valide et cassent la règle voisine.
Placer votre feuille de style avant celle du framework. À spécificité égale, le dernier fichier gagne, donc liez votre CSS en dernier.
Voir une ancienne version. Les navigateurs mettent les feuilles de style en cache. Faites un rechargement forcé, ou ajoutez une version à l'URL (styles.css?v=2) quand vous déployez une modification.

Questions fréquentes

Qu'est-ce que le CSS externe ?

Le CSS externe est une feuille de style enregistrée dans son propre fichier .css et chargée avec <link rel="stylesheet" href="styles.css"> dans le <head> de la page. Toutes les pages qui lient ce fichier reçoivent les mêmes styles, et le navigateur le garde en cache d'une page à l'autre.

Qu'est-ce que le CSS interne ?

Le CSS interne, aussi appelé CSS intégré, est du CSS écrit dans un élément <style> du document HTML lui-même, généralement dans le <head>. Il ne s'applique qu'à cette page.

Comment lier un fichier CSS à une page HTML ?

Ajoutez <link rel="stylesheet" href="styles.css"> dans le <head>. Le href est un chemin relatif au fichier HTML : css/styles.css pointe vers un dossier css placé à côté, et /styles.css part de la racine du site.

Vaut-il mieux utiliser du CSS interne ou externe ?

Le CSS externe pour tout ce qui compte plus d'une page : un seul fichier à modifier, et les navigateurs le téléchargent une fois pour le réutiliser. Le CSS interne convient à une page unique, à une démo ou à un petit bloc de styles critiques que vous voulez dans la première réponse.

Pourquoi mon CSS externe ne fonctionne-t-il pas ?

Les causes habituelles sont un mauvais chemin dans href (cherchez un 404 dans l'onglet Réseau), un rel="stylesheet" manquant, des balises <style> écrites dans le fichier .css, ou une règle placée plus loin qui écrase la vôtre. Un rechargement forcé écarte l'hypothèse d'une ancienne copie en cache.

Concepts liés