Balise HTML <style>
La balise <style> définit la mise en forme des éléments d'une page web. Description, syntaxe, attributs et exemples.
La balise <style> intègre des règles CSS directement dans un document HTML. Elle définit comment les éléments de la page doivent être affichés, sans avoir besoin d'un fichier de feuille de style séparé. On appelle souvent cela le CSS interne (ou intégré).
Pour charger du CSS depuis un fichier séparé, utilisez l'élément <link rel="stylesheet">.
Une page peut contenir plusieurs éléments <style>, et les règles de chacun d'eux sont combinées.
Pourquoi <style> appartient dans le <head>
Le CSS à l'intérieur d'une balise <style> est destiné au navigateur, pas au lecteur, il est donc placé dans l'élément <head>. Il y a de bonnes raisons de le garder là :
- Il bloque le rendu. Le navigateur doit lire et appliquer votre CSS avant de pouvoir afficher la page. Placer les styles dans le
<head>permet au navigateur de savoir comment tout doit s'afficher avant de dessiner le corps de la page. - Il évite le FOUC (Flash Of Unstyled Content). Si les styles sont définis tard dans le document, le navigateur peut brièvement afficher du contenu non stylisé puis le re-styliser, provoquant un scintillement visible et un décalage de mise en page.
HTML5 autorise techniquement un élément <style> à l'intérieur du <body> (un navigateur appliquera quand même les règles), mais cela est déconseillé : cela peut déclencher un re-flow et le FOUC décrit ci-dessus. Gardez vos styles dans le <head>.
Dans les versions antérieures de HTML et dans XHTML, l'attribut type="text/css" était obligatoire avec la balise <style>. En HTML5, c'est la valeur par défaut et il peut être omis.
Trois façons d'intégrer du CSS
La balise <style> n'est que l'une des trois façons d'appliquer du CSS. Choisir la bonne méthode est important :
| Méthode | Comment | Idéal pour |
|---|---|---|
Attribut style en ligne | <p style="color: red;"> | Une substitution ponctuelle sur un seul élément. Difficile à maintenir et dotée de la spécificité la plus élevée, à utiliser avec parcimonie. |
<style> interne | Un bloc <style> dans le <head> | Les styles nécessaires à une seule page, ou le CSS critique que vous souhaitez intégrer pour éviter une requête supplémentaire. |
<link rel="stylesheet"> externe | Un fichier .css séparé | Les styles partagés entre de nombreuses pages. Mis en cache par le navigateur et sépare le contenu de la présentation — le choix habituel pour les vrais sites. |
Consultez HTML Styles pour une comparaison plus complète.
Syntaxe
La balise <style> va par paires. Le contenu est écrit entre les balises ouvrante (<style>) et fermante (</style>).
Exemple de la balise HTML <style> :
Balise HTML <style>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #1c87c9;
}
p {
color: #8ebf42;
}
</style>
</head>
<body>
<h1>Text heading.</h1>
<p>First paragraph.</p>
</body>
</html>Les sélecteurs (h1, p) à l'intérieur du bloc ciblent des éléments dans le corps, et les déclarations entre les accolades définissent leurs styles.
Résultat
Appliquer des styles conditionnellement avec media
L'attribut media permet à un bloc <style> de s'appliquer uniquement lorsque sa media query correspond — par exemple uniquement sur les petits écrans, uniquement sur les écrans (pas à l'impression), ou uniquement lors de l'impression. Les règles d'un bloc dont la requête ne correspond pas sont ignorées.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Always applies -->
<style>
p {
color: #1c87c9;
}
</style>
<!-- Applies only on screens up to 600px wide -->
<style media="screen and (max-width: 600px)">
p {
color: #8ebf42;
font-size: 20px;
}
</style>
</head>
<body>
<p>Resize the window: this text turns green and grows on narrow screens.</p>
</body>
</html>Vous pouvez faire la même chose sur l'élément <link> (<link rel="stylesheet" media="..." href="...">).
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| media | media_query | Spécifie le média pour lequel les styles s'appliquent, par ex. screen and (max-width: 600px). Si omis, les styles s'appliquent à tous les médias. |
| type | text/css | Spécifie le type MIME de la feuille de style. Facultatif en HTML5, puisque text/css est la valeur par défaut. |
L'attribut obsolète scoped
Vous pouvez encore voir des références à un attribut scoped, qui était censé limiter les règles d'un bloc <style> à l'élément parent et à ses descendants. Il n'a jamais été largement implémenté et a été supprimé de la norme HTML — ne l'utilisez pas. Pour délimiter la portée du CSS aujourd'hui, utilisez plutôt l'une de ces approches modernes :
- Shadow DOM (via des éléments personnalisés / web components), où les styles sont entièrement encapsulés et ne fuient ni vers l'intérieur ni vers l'extérieur.
- Noms de classes délimités — un préfixe de classe unique par composant, appliqué manuellement ou généré par des outils tels que CSS Modules.