Balise HTML <style>

Définition et utilisation

<style> est utilisé pour définir les informations de style du document (CSS).

Dans <style> Dans un élément, vous pouvez spécifier la manière dont l'élément HTML est affiché dans le navigateur.

Veuillez noter que l'élément style définit des styles CSS intégrés dans le document HTML, tandis que l'élément link est utilisé pour importer des styles de feuilles de style externes.

L'élément style peut apparaître à divers endroits dans un document HTML. Un document peut contenir plusieurs éléments style, donc il n'est pas nécessaire de mettre toutes les définitions de styles dans la section head. Cette caractéristique est très utile dans le cas de la génération de pages à l'aide d'un moteur de template, car ainsi, il est possible de fournir des styles spécifiques à la page pour compléter les styles définis par le modèle.

Voir également :

Tutoriel HTML :HTML CSS

Tutoriel CSS :Tutoriel CSS

Manuel de référence HTML DOM :Objet Style

Exemple

Exemple 1

Utilisation <style> Un élément applique une feuille de style simple au document HTML :

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

Essayez-le vous-même

Exemple 2

Plusieurs styles pour un même élément :

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

Essayez-le vous-même

Avis et commentaires

Attention :Lorsque le navigateur lit la feuille de style, il formate le document HTML en fonction des informations de la feuille de style. Si plusieurs attributs sont définis pour le même sélecteur (élément) dans différentes feuilles de style, la valeur de la feuille de style lue précédemment sera utilisée (voir l'exemple ci-dessus) !

Astuce :Pour lier une feuille de style externe, utilisez Balise <link>.

Astuce :Pour en savoir plus sur les feuilles de style, veuillez lire notre Tutoriel CSS.

Attribut

Attribut Valeur Description
media Requête média Définit le média utilisé pour les styles.
type text/css Définit le type de média du balise <style>.

Attributs globaux

<style> Les balises supportent également Attributs globaux dans HTML.

Attributs événement

<style> Les balises supportent également Attributs événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs affichent les valeurs par défaut suivantes : <style> Élément :

style {
  display: none;
}

Prise en charge du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support