Élément HTML `<style>` : l'élément d'information de style

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

En savoir plus
Voir la compatibilité complète

L'élément HTML <style> contient des informations de mise en forme pour un document ou une partie d'un document. Il contient du CSS, qui est appliqué au contenu du document contenant l'élément <style>.

Exemple interactif

<style>
  p {
    color: #26b72b;
  }
  code {
    font-weight: bold;
  }
</style>

<p>
  Ce texte est vert. Les styles en incise priment sur le CSS inclus de façon
  externe.
</p>

<p style="color: blue">
  L'attribut <code>style</code> peut toutefois le remplacer.
</p>

p {
  color: red;
}

L'élément <style> est généralement inclus dans l'élément <head> du document. Il peut également être utilisé partout où le contenu des métadonnées est autorisé, par exemple à l'intérieur d'un élément <template>.

Si vous incluez plusieurs éléments <style> et <link> dans votre document, ils sont appliqués au DOM dans l'ordre dans lequel ils sont inclus dans le document — assurez-vous de les inclure dans le bon ordre, pour éviter des problèmes de cascade inattendus.

De la même manière que les éléments <link>, les éléments <style> peuvent inclure des attributs media qui contiennent des requêtes média, ce qui vous permet d'appliquer sélectivement des feuilles de style internes à votre document selon des caractéristiques du média comme la largeur de la zone d'affichage (viewport en anglais).

Attributs

Cet élément inclut les attributs universels.

blocking

Cet attribut indique explicitement que certaines opérations doivent être bloquées lors de la récupération des sous-ressources critiques et de l'application de la feuille de style au document. Les feuilles de style importées avec @import sont généralement considérées comme des sous-ressources critiques, tandis que background-image et les polices ne le sont pas. Les opérations à bloquer doivent être une liste, séparée par des espaces, de jetons de blocage listés ci-dessous. Actuellement, il n'y a qu'un seul jeton :

render : Le rendu du contenu à l'écran est bloqué.

Note : Seuls les éléments style dans le <head> du document peuvent éventuellement bloquer le rendu. Par défaut, un élément style dans le <head> bloque le rendu lorsque le navigateur le découvre lors de l'analyse. Si un tel élément style est ajouté dynamiquement avec un script, vous devez également définir blocking = "render" pour qu'il bloque le rendu.

media

Cet attribut est une requête média qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est all.

nonce

Un nombre unique (nonce en anglais) cryptographique utilisé pour inscrire les styles en incise sur une liste blanche pour la règle style-src de la CSP (Content Security Policy). Le serveur doit générer un nombre unique chaque fois qu'il transmet une règle de sécurité. Ce nombre unique ne doit pas pouvoir être deviné, car sinon, il devient trivial d'outrepasser la règle de sécurité.

title

Cet attribut indique un ensemble de feuilles de style alternatif.

Attributs obsolètes

type: Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est text/css.

Exemples

Une feuille de style simple

html

<!doctype html>
<html lang="fr-FR">
  <head>
    <meta charset="UTF-8" />
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Je suis un paragraphe de présentation.</p>
  </body>
</html>

Résultat

Utiliser `<style>` à l'intérieur de `<template>`

Un élément <style> peut également être placé à l'intérieur d'un élément <template>. Les styles restent inactifs jusqu'à ce que le contenu du template soit instancié et inséré dans le document.

html

<template id="modele-carte">
  <style>
    .carte {
      border: 1px solid #cccccc;
      padding: 1rem;
      border-radius: 0.5rem;
    }
  </style>

  <div class="carte">Contenu du modèle</div>
</template>

Utiliser plusieurs éléments `<style>`

Dans cet exemple, on utilise deux éléments <style>, on peut voir comment les déclarations en conflit sont gérées — c'est le deuxième élément qui a la priorité si les spécificités sont égales, car les feuilles sont appliquées dans l'ordre.

html

<!doctype html>
<html lang="fr-FR">
  <head>
    <meta charset="UTF-8" />
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Je suis un paragraphe de présentation.</p>
  </body>
</html>

Résultat

Utiliser une requête média

Dans cet exemple (basé sur le précédent), on ajoute un attribut media sur le deuxième élément <style> afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d"affichage (viewport) est inférieure à 500 pixels.

html

<!doctype html>
<html lang="fr-FR">
  <head>
    <meta charset="UTF-8" />
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    </style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Je suis un paragraphe de présentation.</p>
  </body>
</html>

Résultat

Résumé technique

Catégories de contenu	Contenu de métadonnées.
Contenu autorisé	Du contenu textuel correspondant à l'attribut `type` (c'est-à-dire `text/css`).
Omission de balises	Les deux balises doivent être présentes.
Parents autorisés	Tout élément qui accepte du contenu de métadonnées.
Rôle ARIA implicite	Pas de rôle correspondant ^(angl.)
Rôles ARIA autorisés	Aucun `role` autorisé
Interface DOM	`HTMLStyleElement`