logo oujood
🔍

Balise HTML <style> : écrire du CSS directement dans une page

La balise <style> place des règles CSS dans le <head> d'une page HTML. Quand l'utiliser, comment la configurer, et quand préférer une feuille de style externe.

OUJOOD.COM

À quoi sert la balise <style> ?

LES BALISES HTML

La balise <style> se place dans le <head> d'un document HTML et contient des règles CSS qui s'appliquent à toute la page. C'est ce qu'on appelle un style interne : le CSS et le HTML cohabitent dans le même fichier.

C'est utile quand vous travaillez sur une page unique, un prototype rapide, ou quand vous voulez tester un style sans créer de fichier externe. Pour un site de plusieurs pages en revanche, une feuille de style externe chargée avec <link> reste la meilleure option — elle se met en cache, se réutilise, et reste facile à maintenir.

La balise <style> nécessite obligatoirement une balise de fermeture </style>.

Syntaxe de base

Voici la structure minimale d'une page avec un style interne. On définit ici une classe CSS simple applicable à n'importe quel élément de la page :

  📋 Copier le code

<html>
   <head>
      <title>Les styles CSS internes</title>
      <style>
         /* Classe CSS personnalisée */
         .MonStyle {
            font-family: verdana, sans-serif; /* Police principale avec fallback */
            font-weight: 700; /* 700 = gras */
            color: #333;
         }
      </style>
   </head>
   <body>
      <p class="MonStyle">Texte stylisé avec la classe CSS</p>
   </body>
</html>

Plusieurs règles CSS dans un seul bloc <style>

Un seul bloc <style> peut contenir autant de règles que nécessaire : sélecteurs d'éléments, classes, identifiants. Tout ce que vous écririez dans un fichier .css externe s'écrit de la même façon ici :

  📋 Copier le code

<html>
   <head>
      <title>Styles CSS multiples</title>
      <style type="text/css">
         /* Style appliqué à tous les paragraphes */
         p {
            line-height: 1.6;
            margin-bottom: 15px;
         }
         /* Style des titres h2 */
         h2 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
         }
         /* Classe réutilisable pour les boutons */
         .bouton {
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
         }
         /* ID unique pour la navigation */
         #navigation {
            display: flex;
            justify-content: space-between;
         }
      </style>
   </head>
   <body>
      <div id="navigation">Menu</div>
      <h2>Titre principal</h2>
      <p>Contenu du paragraphe</p>
      <button class="bouton">Cliquez ici</button>
   </body>
</html>

Notez l'attribut type="text/css" sur la balise <style>. Il était obligatoire en HTML4 ; en HTML5, il est optionnel car le navigateur suppose déjà que le contenu est du CSS.

Media queries dans la balise <style>

Les media queries s'écrivent exactement de la même façon qu'en feuille externe. L'exemple suivant adapte la mise en page selon la largeur de l'écran :

  📋 Copier le code

<style type="text/css">
   /* Styles de base — tous les écrans */
   .conteneur {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
   }
   /* Tablettes et petits écrans (max 768px) */
   @media screen and (max-width: 768px) {
      .conteneur {
         padding: 10px;
      }
      h1 {
         font-size: 24px;
      }
   }
   /* Mobiles (max 480px) */
   @media screen and (max-width: 480px) {
      .conteneur {
         padding: 5px;
      }
      h1 {
         font-size: 18px;
      }
   }
</style>

Les attributs de la balise <style>

La balise <style> accepte deux attributs propres. La colonne DTD indique dans quelle version HTML 4.01/XHTML 1.0 l'attribut est autorisé : S=Strict, T=Transitional, F=Frameset.

Attribut obligatoire (HTML4) / optionnel (HTML5)

Attribut Valeur Description DTD
type text/css Déclare le type MIME de la feuille de style. Obligatoire en HTML4, inutile en HTML5 où "text/css" est la valeur par défaut. STF

Attribut optionnel

L'attribut media précise sur quel type de support les styles doivent s'appliquer. Sans lui, les styles s'appliquent sur tous les supports.

Attribut Valeur Description DTD
media screen, tty, tv, projection, handheld, print, braille, aural, all Définit les supports cibles : écran, impression, lecteur vocal, etc. La valeur all couvre tous les supports. STF

Attributs standards HTML

Attribut Valeur Description DTD
dir ltr rtl Sens de lecture du contenu : gauche-droite (ltr) ou droite-gauche (rtl) STF
id nom de l'id Identifiant unique pour cibler cet élément <style> via JavaScript STF
lang language_code Code de langue du contenu (ex. fr, en) STF
title text Texte affiché en infobulle au survol de l'élément STF
xml:lang language_code Équivalent de lang pour les documents XHTML STF

Événements JavaScript

La balise <style> ne supporte aucun attribut d'événement (onclick, onload, etc.). Elle sert uniquement à déclarer des styles, pas à réagir aux interactions.

Quand utiliser <style> plutôt que <link> ?

La balise <style> convient bien dans deux situations précises. D'abord pour les styles critiques au-dessus de la ligne de flottaison : inliner le CSS nécessaire au premier rendu évite un aller-retour réseau et améliore le temps d'affichage initial (First Contentful Paint). Ensuite pour les pages autonomes qui n'ont pas vocation à partager leurs styles avec d'autres pages — un email HTML, un composant isolé, une page de démonstration.

Pour tout le reste — site multi-pages, CSS partagé, projet en équipe — une feuille externe chargée avec <link> reste plus adaptée : elle se met en cache entre les pages, et centralise les styles en un seul endroit à maintenir.

Vous êtes ici : Balise HTML <style>     Retour à la liste des balises HTML




Retour à l'accueil du site

Retour à l'accueil du site

Par carabde | Mis à jour le 20 avril 2026