[NDA: Article écrit en Janvier 1997, publié dans le magazine Planète INTERNET]
Les feuilles de style sont la réponse "propre" à tous ceux qui ont imaginé faire de la mise en page avec le langage HTML. Elles permettent non seulement de redéfinir l'aspect des différents éléments du langage HTML mais également de créer une multitude de styles supplémentaires afin d'assouvir les exigences les plus extrêmes des "maquettistes du Web".
Contexte
A son origine, le langage HTML avait été créé pour permettre de donner une structure sémantique aux documents du WWW. Cependant, les derniers 18 mois ont vu l'arrivée massive d'extensions destinées au formatage physique de ces mêmes documents, au point de dénaturer complètement le langage. L'une des principales raisons d'être des feuilles de style (style sheets en anglais), est de stopper la prolifération de ces nouveaux marqueurs HTML tels que <FONT> ou d'attributs tels que BGCOLOR ou PADDING...
Mais les feuilles de style permettent d'aller encore plus loin. Elles vous permettent de définir une "maquette" pour l'ensemble de votre site web et de l'appliquer automatiquement à toutes vos pages. Il suffit pour cela de définir votre feuille de style dans un fichier portant l'extension .css (Cascading Style Sheet) et d'y faire référence depuis toutes vos pages HTML. Ces styles peuvent ensuite être combinés pour modifier légèrement le look d'une page donnée par rapport à la norme. La norme prévoit également de donner le choix à l'utilisateur, des feuilles de styles qu'il désire appliquer à un document.
Néanmoins, à ce jour, seul Microsoft a implémenté un sous ensemble des feuilles de style dans son Internet Explorer version 3.0. Mais Netscape travaille activement à les intégrer dans Navigator 4 dont une première bêta vient de sortir. Spyglass a également annoncé qu'il supporterait les feuilles de style dans son prochain browser.
Principe de fonctionnement
Les feuilles de styles vous permettent de redéfinir complètement la manière dont s'affichent les différents éléments structurels d'une page HTML. Ainsi, vous pouvez redéfinir de quelle manière s'affiche un paragraphe standard, un titre de niveau 2 ou encore une liste numérotée. Mais les feuilles de style vous permettent également de définir de nouveaux styles, comme dans notre exemple où nous définissons la classe "chapo" pour les paragraphes d'introduction de notre document.
Pour définir la feuille de style, nous disposons de plusieurs méthodes: soit nous définissons les styles à la volée lorsque nous utilisons un marqueur, soit nous faisons référence à une feuille de style externe, soit nous incluons le style dans la section HEAD de notre page. Cette dernière méthode est celle que nous utilisons dans nos exemples.
Un exemple
Parmi les illustrations de cet article, vous pouvez apercevoir trois captures d'une même page HTML sur laquelle on a appliqué des feuilles de style différentes. La copie d'écran la plus austère est du HTML brut, sans aucun style appliqué.
Vous trouverez ci dessous le code source de l'une de ces pages:
<HTML>
<HEAD>
<TITLE>Page avec feuille de style</TITLE>
<STYLE TYPE="text/css">
<!--
BODY { background: white }
H1, H2, H3 { font-family: Playbill, fancy }
H1 { color: brown; font-size: 72; text-align: center; text-decoration: underline }
H2 { color: maroon; font-size: 48 }
P { font-family: serif; margin-left: 12% }
P.chapo { font-size: large }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Les feuilles de style</H1>
<H2>De la PAO sur le Web!</H2>
<P class="chapo">Les feuilles de style sont la réponse "propre" à tous ceux qui
ont imaginé faire de la mise en page avec le langage HTML. Elles permettent non
seulement de redéfinir l'aspect des différents éléments du langage HTML
mais également de créer une multitude de styles supplémentaires afin
d'assouvir les exigences les plus extrêmes des "maquettistes du Web".</P>
<H2>Contexte</H2>
<P>A son origine, le langage HTML avait été créé pour permettre de donner une
structure sémantique aux documents du WWW. Cependant, les derniers 18 mois
ont vu l'arrivée massive d'extensions destinés au formatage physique de ces
mêmes documents, au point de dénaturer complètement le langage. L'une des
principales raisons d'être des feuilles de style (style sheets en anglais),
est de stopper la prolifération de ces nouveaux marqueurs HTML tels que
<FONT> ou d'attributs tels que BGCOLOR ou PADDING...</P>
</BODY>
</HTML>
Vous pouvez découvrir la définition de la feuille de style entre les marqueurs <STYLE> et </STYLE>. Cette définition est incluse dans un commentaire HTML (<!-- ... -->) afin qu'un browser n'ayant pas connaissance des feuilles de style n'affiche pas de texte indésirable.
Vous pouvez constater qu'on redéfinit le style d'affichage des éléments <BODY>, <H1>, <H2>, <H3> et <P>. On définit également une nouvelle classe pour l'élément <P> que l'on nomme "chapo". Les styles redéfinis sont pris en compte automatiquement pour toute la page. Par contre, pour utiliser la classe chapo, nous sommes obligé de préciserCLASS="chapo" dans le marqueur <P> commençant le paragraphe concerné. La classe "chapo" s'applique alors jusqu'au marqueur </P> qui suit.
Si vous voulez appliquer une classe à une zone plus étendue, il vous suffit de délimiter cette zone au moyen des marqueurs suivants:
<DIV class="chapo"> vos paragraphes.... </DIV>
Comme nous l'avons évoqué plus haut vous pouvez également définir un style "à la volée" comme ceci:
<DIV STYLE="font-size: large">
vos paragraphes....
</DIV>
Parmi les attributs que nous avons redéfini on trouve la couleur des caractères (color: <code couleur>), la couleur de fond (background: <code couleur>), la taille des caractères (font-size: <taille>), l'alignement du texte (text-align: [left | right | center]) ou encore la police de caractères à utiliser (font-family: <liste de noms>).
On retombe ici dans l'éternel problème de nommage des polices de caractères. Vous pouvez donc préciser une liste de noms séparés par des virgules en espérant tomber sur un nom de police installée sur le poste du client. Néanmoins, il est recommandé de terminer la liste par un nom générique qui sera reconnu par tous les clients. Ces noms génériques sont:serif (avec empattement), sans-serif (sans empattement), cursive, fantasy, et monospace (type courrier).
Un autre exemple
Vous trouverez ci dessous la définition de l'autre feuille de style utilisée dans nos exemples:
<STYLE TYPE="text/css">
<!--
BODY { background: #FFFFE0 }
H1, H2, H3 { font-family: monospace, font-style: italic }
H1 { color: red; text-align: center }
H2 { color: #FFFFE0; background: red; text-align: right }
P { font-family: sans-serif; margin-left: 12%; margin-right: 12%; text-align: right }
P.chapo { color: gray; font-weight: bold }
-->
</STYLE>
Comme vous pouvez le constater, il suffit de faire quelques modifications au niveau du style pour changer complètement l'aspect du document affiché.
Images de fond
Autre avantage des style sheets: le désormais [NDA: tristement] traditionnel attribut BACKGROUND du marqueur<BODY> est remplacé par une syntaxe bien plus riche en possibilités. En effet: non seulement, vous pouvez appliquer l'attribut background à virtuellement n'importe quel élément HTML, mais de plus, si vous choisissez d'afficher une image de fond, vous pouvez contrôler précisément de quelle manière celle-ci doit être répétée.
Pour indiquer une couleur de fond, la syntaxe est triviale:
{background: red}
{background: #6633FF}
Par contre, pour une image, c'est un tout petit peu plus complexe:
{background: url(http://www.domaine/image.gif)}
Faut-il utiliser les feuilles de style ou non?
Après ces quelques exemples d'application des feuilles de style, il est encore possible d'hésiter à les utiliser par rapport aux diverses extensions HTML qui sont déjà bien implantées. On peut même être tenté de mélanger les deux afin de profiter du maximum de possibilités offertes.
Néanmoins, d'ici quelques mois, vous reviendrez probablement naturellement à un code HTML plus pur et vous en exclurez tout ce qui ne concerne pas la structure même du document alors que les feuilles de styles vous offriront des possibilités inégalées en termes de mise en page et de contrôle de l'affichage.
[NDA: A ce jour, en 2002, la question ne se pose absolument plus: OUI il FAUT utiliser les feuilles de style, et RIEN QUE CA!]
File: brut.html
File: journal.html
File: magazine.html