L'élément HTML <style> contient des informations de mise en forme pour un document ou une partie d'un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en CSS.

L'élément <style> peut être inclus dans l'élément <head> ou dans l'élément <body> du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément <head> afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments <link>.

Si plusieurs éléments <style> et <link> sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.

À l'instar des éléments <link>, les éléments <style> peuvent inclure des attributs media qui décrivent des requêtes média qui permettent d'appliquer des feuilles de styles selon certains critères provenant du média utilisé (la largeur de l'écran par exemple).

Attributs

Cet élément inclut les attributs universels.

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 nonce cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle style-src de la CSP (Content Security Policy). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.
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.
title
Cet attribut indique un ensemble de feuilles de style alternatif.

Attributs dépréciés ou obsolètes

scoped
Cet attribut indique que les règles de mises en forme ne s'appliquent qu'aux éléments ayant le même élément parent que l'élément courant.

Exemples

Une feuille de style simple

HTML

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style> 
</head>
<body>
  <p>Voici un paragraphe.</p>
</body>
</html>

Résultat

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>
<head>
  <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>Voici un paragraphe.</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>
<head>
  <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>Voici un paragraphe.</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ôles ARIA autorisés Aucun
Interface DOM HTMLStyleElement

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de 'style' dans cette spécification.
Standard évolutif Ajout de l'attribut nonce.
HTML5
La définition de 'style' dans cette spécification.
Recommendation Aucune modification depuis HTML 4.01 Specification.
HTML 4.01 Specification
La définition de 'style' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android Support complet Oui
typeChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android Support complet Oui
mediaChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android Support complet Oui
titleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android Support complet Oui
scoped
ObsolèteNon-standard
Chrome Aucun support 19 — 35
Désactivée
Aucun support 19 — 35
Désactivée
Désactivée From version 19 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Aucun support 55 — 61
Notes Désactivée
Aucun support 55 — 61
Notes Désactivée
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Désactivée From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 21 — 55
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support 55 — 61
Notes Désactivée
Aucun support 55 — 61
Notes Désactivée
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Désactivée From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 21 — 55
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

  • L'élément <link> qui permet d'utiliser des feuilles de style externes.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mathisaillot, tregagnon, Goofy, Matouche
Dernière mise à jour par : SphinxKnight,