Pour bien définir à quoi servent les feuilles de styles CSS, partons d'un fond que nous allons mettre en forme. Le fond est défini dans un document, par exemple un fichier XML comme c'est le cas dans les autres articles. Ce document est travaillé, par exemple à l'aide des feuilles de styles XSLT, pour générer un nouveau document avec les données à afficher. Ce nouveau document a, jusqu'à peu, quasiment toujours été en HTML losqu'il s'agissait de le diffuser via un navigateur web. Actuellement, on commence à voir des documents XHTML, quand il ne sont pas en XML.

Le navigateur web, jusqu'à récemment, récupérait un fichier HTML via le web et l'affichait avec un style défini. Revenez il y a 5 ans par exemple, le look des sites web était non seulement rudimentaire, mais tous les sites se ressemblaient. Voyez par exemple le site de GNU (http://www.gnu.org), ou les HOWTO en HTML: la police de caractères est la même, il y a peu de décorations, et les liens sont tous des textes soulignés. Allez maintenant sur des sites plus modernes, comme un site de vente en ligne, un site portail ou http://linuxfr.org: vous verrez la différence. Pourtant le HTML a peu évolué entre temps. Ce qui fait la différence, c'est la forme de ces documents web, forme définie par les feuilles de style CSS.

Les feuilles de style CSS servent donc à changer le style par défaut des éléments HTML. Les feuilles de style CSS niveau 1 datent de fin 1996 et ont été revues début 1999. Cependant, si elles datent de fin 1996, il a fallu attendre un peu qu'elles soient implémentées dans les navigateurs, dont le plus évolué était probablement netscape 3.0 à l'époque ! C'est pour cela qu'elles semblent plus récentes. Les feuilles de style CSS niveau 1 permettent principalement de redéfinir l'aspect des balises HTML, comme la taille ou la police de caractères pour un texte, ou alors les marges, taille des bords et marges intérieures dans le cas d'un tableau et de ces cellules.

Les feuilles de style CSS ont été revues et bien améliorées pour ce qui est maintenant les feuilles de style CSS2, recommendation datant de mai 1998, il y a à peine plus de 5 ans ! Les feuilles de style CSS2 reprennent quasiment tout des feuilles de style CSS1, mais rajoutent une nouvelle dimension: elles permettent de travailler non plus au niveau des balises mais au niveau du document. Par exemple, on pourra décider qu'un bloc sera affiché en haut à droite de manière fixe, même quand l'utilisateur scrolle l'écran pour afficher le bas de la page. De plus, les feuilles de style CSS2 permettent de définir le style de balises autres que les balises HTML, ce qui permet de mettre en forme un document XML.

Attention donc, on pourrait de nouveau confondre les feuilles de style XSLT et CSS2 puisqu'avec les deux on peut partir du XML pour générer un document affichable via un navigateur web digne de ce nom. Mais relisez ce qui précède: une feuilles de style XSLT sert à générer un document à partir d'un document XML: on travaille sur le fond; alors qu'une feuille de style CSS2 met en forme un document: on travaille sur la forme.

Ecrire un article sur toutes les possibilités des feuilles de style ne présente pas énormément d'intérêt: il serait beaucoup trop long. La spécification des feuilles de style CSS2, ou du moins le document postscript disponible sur le site du W3C, fait plus de 300 pages. Je vais donc me contenter d'une courte introduction aux feuilles de style CSS1 et CSS2, puis continuer sur la mise en forme des balises, ce qui reviendrait à me limiter aux feuilles de style CSS1, mais je n'oublierai pas les améliorations que CSS2 apporte sur ce sujet.