ArticlesLes Feuilles de Style
[NDA: Article écrit en Janvier 1997, publié dans 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éciser CLASS="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!]
"Doc Web" - François PLANQUE
Janvier 1997.
| brut.html | Page HTML brute |
| brut.gif | Rendu brut |
| journal.html | Page HTML avec style "Journal" |
| journal.gif | Rendu "Journal" |
| magazine.html | Page HTML avec style "Magazine" |
| magazine.gif | Rendu "Magazine" |
