métadonnées block

<style>

Contient des règles CSS appliquées au document. Peut être placé dans head ou body pour des styles scoped.

Description

L’élément <style> contient des règles CSS appliquées au document courant. Généralement placé dans <head>, il peut aussi apparaître dans <body> (styles inline pour une section spécifique). Pour des styles appliqués à plusieurs pages, préférer un fichier CSS externe via <link rel="stylesheet">.

Syntaxe

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #333;
  }
</style>

Exemples

Styles critiques inline (pour la performance) :

<head>
  <style>
    /* Critical CSS — styles above-the-fold */
    body { margin: 0; font-family: system-ui; }
    .hero { background: #336699; color: white; padding: 2rem; }
  </style>
  <link rel="stylesheet" href="/css/app.css">
</head>

Style conditionnel pour l’impression :

<style media="print">
  nav, footer, aside { display: none; }
  body { font-size: 12pt; color: black; }
</style>

Attributs spécifiques

AttributTypeDescription
mediastringMedia query CSS conditionnant l’application des styles (ex. print, (min-width: 768px)).
noncestringValeur cryptographique pour la Content Security Policy (CSP).
blockingstringrender bloque le rendu jusqu’au chargement de la feuille de style.

Notes

CSS critique inline : inliner les styles critiques (above-the-fold) dans <style> améliore le LCP (Largest Contentful Paint) en évitant un aller-retour réseau pour le CSS bloquant. Charger le reste du CSS via <link> externe.

Scoped CSS : HTML avait prévu un attribut scoped pour limiter les styles à l’élément parent, mais il a été retiré de la spécification. Utiliser CSS Modules, Shadow DOM ou des sélecteurs spécifiques à la place.

Support navigateurs

Chrome1+ · Firefox1+ · Safari1+ · Edge12+