Feuilles de style
Styles internes
HomeUpDown

Il faut maintenant incorporer les styles dans le document Html. Commençons par le plus simple, soit l'incorporation à l'intérieur d'une page. D'où le titre "Styles internes".

A l'intérieur des balises <HEAD></HEAD>

Cette façon de procéder est de loin la plus commune et la plus logique. D'abord parce que les balises HEAD contiennent des informations pour le browser et les feuilles de style appartiennent à celles-ci. Ensuite parce que l'on rejoint ainsi l'essence même des feuilles de style qui est de séparer les éléments de mise en forme du contenu.

    <HTML>
    <HEAD>
    <STYLE type="text/css">
    <!--
    La ou les feuille(s) de style
    -->
    </STYLE>
    </HEAD>
    <BODY>

La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.
L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css). Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions de ce "langage".
La balise Html de commentaires <!-- ... --> empêche que les browsers qui ne connaissent pas les feuilles de style, tentent d'interpréter ces instructions. Les informations à l'intérieur des tags de commentaires seront ignorées par ces browsers.
Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript...) de /* commentaires */.


 
A l'intérieur des balises <BODY></BODY>

On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (BODY) du document. Cette façon de faire nous paraît illogique et peu conforme à l'esprit des feuilles de style qui est de définir un style déterminé valable pour la globalité du document. Mais elle existe pour quelques utilisations spécifiques...

    <HTML>
    <BODY>
    <H1 style="font-family: Arial; font-style: italic"> blabla </H1>
    </BODY>
    </HTML>

Signalons :

    • que le style Arial, italique n'affectera que cette seule balise H1.
    • que la syntaxe est légèrement différente de la précédente.
    • que l'écriture suivante fonctionne aussi.

      <STYLE type="text/css">
      H1 { "font-family: Arial; font-style: italic" }
      </STYLE>

HomeDown