Docs CSS exécutables : CSS inline

Q: Qu'est-ce que le CSS inline ?

Le CSS inline est du CSS écrit dans l'attribut style d'un élément, par exemple . Les déclarations ne s'appliquent qu'à cet élément, sans sélecteur.

Q: Quelles sont les 3 façons d'ajouter du CSS à une page HTML ?

En inline, avec l'attribut style sur un élément ; en interne, avec un élément dans la page ; en externe, avec un fichier .css séparé lié par dans le . Le fichier externe est le choix habituel pour un site entier.

Q: Peut-on utiliser hover dans du CSS inline ?

Non. L'attribut style n'accepte que des déclarations, donc les pseudo-classes comme :hover, les pseudo-éléments comme ::before et les règles @media ne peuvent pas y figurer. Placez-les dans un élément ou dans une feuille de style.

Ce qu'est le CSS inline

Le CSS inline est du CSS écrit directement sur un élément HTML avec l'attribut style. Sa valeur est une liste de déclarations, property: value;, qui ne s'appliquent qu'à cet élément.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

Il n'y a ni sélecteur ni accolades : la cible est l'élément qui porte l'attribut. Séparez les déclarations par des points-virgules. Le dernier point-virgule est facultatif, mais le garder permet d'ajouter la déclaration suivante sans risque.

Syntaxe

<element style="property: value; property: value;">

Partie	Exemple	Remarques
Attribut	`style="..."`	Un attribut global : autorisé sur tous les éléments HTML
Déclaration	`color: #2563eb;`	Même syntaxe que dans une règle de feuille de style
Plusieurs déclarations	`padding: 8px; border: 1px solid #e5e7eb;`	Séparées par `;`
Guillemets à l'intérieur	`style="font-family: 'Courier New', monospace;"`	Utilisez des guillemets simples dans l'attribut entre guillemets doubles

Tout ce qui n'est pas une déclaration est interdit. :hover, ::before, @media et les sélecteurs n'ont pas leur place dans un attribut style.

Les 3 façons d'ajouter du CSS à une page HTML

Le CSS arrive sur une page de trois façons. Cette page traite de la première ; le CSS externe et interne a sa propre page.

Méthode	Où se trouve le CSS	Portée	Usage typique
Inline	Attribut `style` sur un élément	Cet élément	Valeurs ponctuelles, valeurs définies par JavaScript
Interne	Élément `<style>` dans la page	Cette page	Démos d'une seule page, templates d'e-mail, CSS critique
Externe	Un fichier `.css` lié avec `<link>`	Toutes les pages qui le lient	Styliser un site entier

Le même paragraphe stylisé des trois façons (le fichier externe est montré en commentaire, car l'aperçu n'a pas de second fichier à charger) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Le troisième paragraphe garde le padding et l'arrondi de la règle .note et ne remplace que le fond, car le style inline ne définit que cette propriété.

Pourquoi les styles inline l'emportent

Quand une règle de feuille de style et un style inline définissent la même propriété, le style inline gagne. La spécificité du sélecteur n'y change rien : même un sélecteur d'ID perd.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

La seule exception est !important. Une déclaration de feuille de style marquée !important l'emporte sur une déclaration inline normale, et un !important inline l'emporte sur les deux. C'est pour cela que les styles inline rendent un site difficile à maintenir : pour les modifier depuis une feuille de style, il faut !important, ce qui lance une surenchère. La page sur !important détaille l'ordre complet.

Quand le CSS inline est le bon outil

Les styles inline conviennent quand la valeur est une donnée et non un choix de design : elle change d'un élément à l'autre et elle est écrite par un template ou par JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

L'apparence (couleurs, hauteur, arrondi) reste dans la feuille de style. Seule la largeur, différente pour chaque barre, est inline. JavaScript écrit le même attribut via element.style :

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Après le clic, le HTML du paragraphe contient style="color: rgb(245, 158, 11); font-weight: bold;". Les noms de propriétés avec un trait d'union passent en camelCase en JavaScript (font-weight devient fontWeight).

Une variable CSS est souvent le compromis le plus propre : ne définissez que la variable en inline, style="--progress: 35%", et laissez la feuille de style l'utiliser. Voir les variables CSS.

Les limites du CSS inline

Pas d'états ni de pseudo-éléments. Impossible d'écrire :hover, :focus ou ::before dans un attribut style.
Pas de media queries. Une largeur inline ne peut pas changer sur un téléphone.
Répétition. Dix boutons avec le même style inline, ce sont dix endroits à modifier.
Difficile à surcharger. Seul !important dans une feuille de style l'emporte sur lui.
Content Security Policy. Une CSP stricte sans 'unsafe-inline' dans style-src bloque les attributs style écrits dans le HTML.

Erreurs courantes

Écrire un sélecteur ou des accolades dans style. style="p { color: red }" est ignoré. Seules les déclarations y ont leur place.
Utiliser = au lieu de :. On écrit color: red, pas color=red.
Imbriquer des guillemets doubles. style="font-family: "Arial"" termine l'attribut trop tôt. Utilisez des guillemets simples à l'intérieur.
Oublier les unités. style="width: 200" est ignoré ; écrivez 200px. Seule une longueur de 0 peut se passer d'unité.
Styliser tout un site en inline. Déplacez les styles répétés dans une classe d'une feuille de style et gardez l'inline pour les valeurs propres à chaque élément.

Questions fréquentes

Qu'est-ce que le CSS inline ?

Le CSS inline est du CSS écrit dans l'attribut style d'un élément, par exemple <p style="color: red;">. Les déclarations ne s'appliquent qu'à cet élément, sans sélecteur.

Quelles sont les 3 façons d'ajouter du CSS à une page HTML ?

En inline, avec l'attribut style sur un élément ; en interne, avec un élément <style> dans la page ; en externe, avec un fichier .css séparé lié par <link rel="stylesheet" href="styles.css"> dans le <head>. Le fichier externe est le choix habituel pour un site entier.

Le CSS inline remplace-t-il le CSS externe ?

Oui, dans la plupart des cas. Une déclaration dans l'attribut style l'emporte sur n'importe quel sélecteur d'une feuille de style, quelle que soit sa spécificité. Une feuille de style ne gagne qu'avec !important, et un !important inline l'emporte aussi sur celui-là.

Le CSS inline est-il une mauvaise pratique ?

Pour styliser tout un site, oui : il se répète, ne peut pas utiliser :hover ni les media queries, et il est difficile à surcharger. Il convient en revanche aux valeurs ponctuelles définies par JavaScript ou un template, comme la largeur d'une barre de progression ou une couleur choisie par l'utilisateur.

Peut-on utiliser hover dans du CSS inline ?

Non. L'attribut style n'accepte que des déclarations, donc les pseudo-classes comme :hover, les pseudo-éléments comme ::before et les règles @media ne peuvent pas y figurer. Placez-les dans un élément <style> ou dans une feuille de style.

Concepts liés