Tout savoir sur la balise <style> avec HTML

Permet d'ajouter du style à une page sans passer par une feuille de style externe.

La balise <style> sert à insérer du CSS directement dans un document HTML. Elle permet de définir des règles de mise en forme sans recourir à un fichier externe.

Le code CSS vient ainsi se mettre directement dans les balises <head> de la page.

Idéale pour des démos rapides ou des styles très localisés, la balise <style> doit cependant rester l’exception : pour les projets réels, privilégiez un fichier externe <link>.

Structure et syntaxe de la balise `<style>`

Structure et syntaxe de base

<style> est une balise conteneur (qui fonctionne par paire) :

elle dispose d'une balise d’ouverture : <style>
ainsi que d'une balise de fermeture : </style>

Elle doit, comme nous l'avons vu, être placée dans la section <head> :

HTML

<head>
    <style>
        selecteur {
            propriete: valeur;
        }
    </style>
</head>

Exemple

HTML

<head>
    <style>
        body {
            font-family: system-ui;
            margin: 0;
        }

        h1 {
            color: royalblue;
        }

        .carte {
            border: 1px solid #ccc;
            padding: 1rem;
        }
    </style>
</head>

Essayez donc par vous-même :

Attributs

Attribut	Description	Exemple
`type`	Type MIME du contenu ; `text/css` est implicite en HTML 5.	`<style type="text/css">`
`media`	Spécifie pour quels médias les règles s’appliquent (`screen`, `print`, etc.).	`<style media="print">`
`scoped`	Limite le CSS au parent (expérimental ; non supporté par la plupart des navigateurs).	`<style scoped>`

Différence avec d’autres méthodes de CSS

<style> : CSS interne – chargé avec la page, utile pour snippets.
<link> : CSS externe – meilleur pour la performance (mise en cache) et la maintenance (car factorise les styles).
Attribut style="" (inline) : n’affecte qu’un seul élément, à réserver aux cas uniques.

Bonnes pratiques

Limitez <style> aux codes très brefs, aux prototypes ou aux rares exceptions, mais privilégiez toujours une feuille de style externe.

N'oubliez pas que le principe d'un développeur est le DRY : Don't Repeat Yourself. Donc ne dupliquez pas vos sélecteurs dans plusieurs pages ! 👀

Nommez vos classes de façon cohérente (BEM, Utility-First, etc.) pour éviter les conflits.

Placez le bloc <style> après les métadonnées et avant les scripts.

Compatibilité des navigateurs

La balise <style> est prise en charge par tous les navigateurs depuis HTML 2.0 ; l’attribut scoped est peu supporté.

Navigateur	Balise <style>	Attribut scoped
Chrome	Oui	Non
Firefox	Oui	Non
Safari	Oui	Non
Edge	Oui	Non
Internet Explorer	Oui	Non