Accueil    HTML    Balise STYLE
 



balise style  Balise STYLE : Styles CSS

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <style> est employée pour centraliser les informations de mise en forme des éléments html utilisés dans la page. Sa déclaration se fait dans l'en-tête du document html, c'est à dire à l'intérieur de la balise <head>. A l'intérieur de ce tag, il est possible de déclarer les styles CSS qui seront appelés, soit par les attributs "class", soit par référence aux attributs "id" des différents tags html du document.

L'utilisation de la balise <style> est de moins en moins courante, la bonne pratique étant de centraliser les styles utilisés dans une feuille de style CSS afin de mieux gérer, ordonner et contrôler les mises en formes faite sur de nombreuses pages.
La référence à une feuille de style se fait avec l'utilisation de la balise <link> comme suit (au sein du tag <head>) :


<link rel="stylesheet" type="text/css" href="MaFeuilleDeStyle.css" media="screen" />

Remarque : l'attribut media peut définir si le style de la feuille est à appliquer pour le rendu visuel (screen) ou pour le rendu d'impression (print)


Le style CSS est un vaste sujet complémentaire à la connaissance du html et indispensable pour obtenir des rendus visuels efficaces. Ce site vous présente la totalité des styles applicables associés à des exemples dans la partie CSS.



Propriétés pour la balise style :




Propriétés Définition Valeurs
type Indique le type MIME de la feuille de style text/css


Exemple d'utilisation de la balise style :





La balise <style> se déclare comme suit dans un document html :

<html>
<head>
   <title>Exemple d'utilisation de la balise style</title>
   <style type="text/css">
   .texte-en-forme{
      font-family:tahoma;
      font-size:12px;
      color:blue;
   }

   #paragraphe-id{
      font-weight:bold;
      color:green;
   }
   </style>
</head>
<body>

<p class="texte-en-forme">Texte du paragraphe utilisant l'attribut "class"</p>


<p id="paragraphe-id">Texte du paragraphe utilisant l'attribut "id" : paragraphe-id</p>


</body>
</html>




Veuillez cliquer ici afin de visualiser le rendu de cet exemple dans une nouvelle page.