CSS

D'abord, soulignons que ces fameux styles ne sont pas de mystérieuses arcanes réservées aux seuls grands prêtres des pages web. On peut très bien s'en servir sans aucune connaissance du HTML, grâce à l'interface de certains logiciels performants comme Dreamweaver (nous parlerons surtout de DW2 parce que celui-ci est accessible gratuitement, mais il y en d'autres).

Ces styles ne sont rien d'autre que des instructions pour l'affichage des différents éléments constituant une page HTML, instructions sur le rendu du texte (police, taille, interligne, marges, italiques ou gras, couleurs, etc...) et sur le positionnement et la mise en page des éléments graphiques. Le HTML classique (HTML 3.2) disposait déjà d'instructions de ce type, mais trop primitives : par exemple, la taille du texte ne pouvait prendre que 6 valeurs différentes. Le HTML moderne (HTML 4) permet de faire varier cette taille pixel par pixel ; l'auteur des pages peut même imposer la taille précise qu'il souhaite alors que c'est le navigateur du visiteur qui décidait de la valeur des 6 tailles classiques. Un des objectifs de ces feuilles de style est de donner à l'auteur le plus grand contrôle possible sur le rendu de ses pages.

Ces instructions sont regroupées dans des «feuilles de style». Le vocable est trompeur en ce qu'il suggère des entités bien individualisées, autrement dit des fichiers séparés. Ce peut être le cas, et on parle alors de feuille de style externe ; les pages qui utilisent ces instructions contiennent alors une ligne spéciale leur disant de se relier à ce fichier et de se conformer à son contenu.

Mais on peut aussi être amené à utiliser des styles spécifiques à une page donnée. Dans ce cas, les instructions de style resteront dans la page elle-même, c.à.d. dans le même fichier. Et on peut même considérer deux niveaux, selon que ces styles particuliers s'appliqueront à l'ensemble de la page (feuille de style interne), ou seulement à un paragraphe particulier ou même à une partie de paragraphe (feuille de style locale).

Le grand avantage d'une feuille de style externe est que toutes les pages qui lui sont reliées auront le même rendu. C'est donc une pièce maîtresse de la charte graphique du site. Si on souhaite changer ou plusieurs éléments de cette charte, comme le type de police ou le fond des pages, il suffira de modifier cet unique fichier pour modifier toutes les pages du site.

On voit donc qu'il y a plusieurs sources possibles pour les instructions de style : les feuilles externes (on peut en avoir plusieurs), les feuilles internes et les feuilles locales. Comme ces différentes sources peuvent parfois se contredire, il importe de fixer les priorités. Le principe est simple : ces feuilles arrivent logiquement les unes après les autres (c'est le sens du signe anglais CCS, cascading style sheets, feuilles de style en cascade), et c'est la dernière lue qui compte en cas de conflit.

Nous parlons d'ordre «logique» pour couper court aux objections de ceux qui ne trouveraient pas cet ordre si évident que ça. Disons que le navigateur va lire successivement :

Il est très déconseillé de laisser des instructions de style classiques quand on utilise les CSS. S'il en reste, ces instructions devraient être considérées comme des instructions locales, donc prioritaires.

Quand on code à la main, il peut arriver qu'on dissémine des instructions internes dans toute la page, au lieu de toutes les regrouper dans l'entête de la page. La plupart des navigateurs acceptera cette façon de faire, mais tout se passera comme si ces instructions étaient regroupées dans une feuille interne unique qui s'applique à toute la page.

On reviendra plus loin sur le fait qu'une page HTML est formée d'une succession de blocs plus ou moins imbriqués les uns dans les autres. Par exemple, on peut considérer la page dans son ensemble, l'un de ses paragraphes, et une partie spéciale de ce paragraphe spécialement mise en valeur par des italiques ou une couleur spéciale, soit trois blocs différents. Le style pour les caractères de ces trois blocs contient un grand nombre d'informations (police, taille, couleur, variante, interligne, etc...) mais on ne va pas tout redéfinir à chaque fois: le style d'un bloc hérite du style du bloc qui le contient, et on ne précisera que ce qui doit changer. Par exemple, le passage spécial du paragraphe évoqué ci-dessus pourra utiliser les mêmes caractères, avec simplement une couleur différente ; sa feuille de style locale se réduira alors à une seule instruction portant sur cette couleur.

On voit qu'il s'agit d'une notion très intuitive. Evidemment, son implémentation dans les navigateurs ne va pas de soi et certains navigateurs historiques comme NN4 ont donné bien du fil à retordre aux auteurs. On verra ici et là quelques moyens de pallier ces difficultés, mais la vraie solution vient de la disparition progressive de ces témoins d'une époque héroïque.

En pratique, l'avantage le plus apprécié des feuilles de style est de donner infiniment plus de possibilités que le HTML classique pour la présentation des pages web. Mais leur arrivée s'est inscrite dans un objectif tout autre... et, à vrai dire, assez peu sensible pour le profane.

A l'origine, il s'agissait de séparer le plus possible les instructions de mise en forme des pages et le contenu même de ces pages, avec plusieurs avantages en vue :

Ce n'est que dans le cadre général de ce programme qu'on a considérablement enrichi les possibilités de mise en page. Evidemment le non-initié qui ne fait ses pages web que par le biais d'un éditeur wyziwyg ne sera guère sensible à la dialectique fond/forme dans un codage qu'il ne veut pas voir, mais il appréciera l'enrichissement de la mise en page et la souplesse de la mise au point générale du site.

Bien entendu, l'idéal est de coder soi-même ses feuilles de style à la main avec un éditeur de texte, le même qu'on utilise pour faire ses pages HTML. On accède ainsi à toutes les propriétés possibles, puis à tous les jeux javascript pour animer tout ça. Le problème pour un néophyte est qu'il faut d'abord bien connaître le HTML classique.

Cette approche n'est pas obligatoire. Tous les grands logiciels (Dreamweaver, Golive, Frontpage, Namo...) permettent de faire des feuilles de style sans aucune connaissance préalable du HTML. On verra qu'on se heurtera tout de même au jargon ésotérique BODY, P, TD, etc... des initiés, mais ce ne sera qu'une très brève rencontre. Dans la suite, nous parlerons surtout de Dreamweaver, dont la version 2 est diffusée gratuitement par Wanadoo.

Précisons toutefois que même si on peut faire du travail très sérieux avec ces logiciels, on n'aura pas accès à tout ce qu'il est possible de faire avec les CSS. Eh ! Il faut bien une prime à ceux qui ont fait l'effort de comprendre le HTML ! ;-)

— Introduction
— CSS et Dreamweaver
— Tailles et dimensions
— Blocs et flux naturel
— Les calques
— Les CSS à la main
— Le tour des propriétés
— Animations

L'organisation générale des nos pages est rappelée ci-dessus. Les trois chapitres en gras sont fondamentaux si on veut comprendre un peu comment une page HTML est bâtie, et donc mieux savoir ce que l'on fait.

La page sur Dreamweaver est essentiellement une prise en main pratique pour les utilisateurs de DW2, mais même ceux-ci auront intérêt à lire les trois chapitres signalés.

Les derniers chapitres n'intéresseront que ceux qui codent à la main. Ceux-ci pourront évidemment sauter le chapitre sur Dreamweaver.

Pour terminer cette introduction, précisons que les feuilles de style constituent en fait un ensemble de recommandations qui ont été publiées en deux temps par le consortium W3C sous les noms de CSS1, puis CSS2, les dernières étant une édition enrichie des premières. On en trouvera une traduction française dans le site www.yoyodesign.org. Sinon, l'original est disponible sur le site du W3C.

Vous pouvez vérifier vos pages en les soumettant à des analyseurs de syntaxe :
http://validator.w3.org/ pour les pages HTML
http://jigsaw.w3.org/css-validator/ pour vérifier les clauses CSS. N'ayez pas peur d'y recourir, les fautes de frappe sont tellement faciles à faire et si difficiles à retrouver ! En contrepartie, ces analyseurs sont extrêmement chatouilleux et tiqueront parfois sur des «erreurs» qui ne pénaliseront probablement jamais vos pages.

Par exemple, ces validateurs ne veulent pas de <script language = "javascript"> alors qu'il s'agit d'un usage très largement répandu à l'heure actuelle et qui le restera, très probablement, par souci de compatibilité (la syntaxe demandée est <script type = "text/javascript">)

Une autre «erreur» courante est déclenchée par les scripts qui contiennent des document.write() avec des balises fermantes comme </em> ou </a>. Apparemment, le groupement de caractères </ est identifié comme le début de la balise </script> de fin de script, et évidemment, ça ne continue pas bien. Le remède consiste à remplacer les </ par des <\/ à l'intérieur des document.write().

Si vous passez l'épreuve avec les honneurs, vous aurez le droit d'arborer fièrement l'icone ci-contre ! Nous avons ainsi testé — avec succès — toutes les pages de ce tutorial (mais soyez gentils, ne vérifiez pas nos autres Réponses de trop près... :-)

Initiation aux feuilles de style (CSS)

Qu'est ce que c'est ?

Où met-on ces instructions ?

La cascade des feuilles de style

La notion d'héritage

L'intérêt des feuilles de style

Avec quels logiciels peut-on se mettre aux feuilles de style ?

Comme lire ces pages

Un évangile de référence