Introduction aux feuilles de styles

Face au nombre croissant de documents présents sur Internet, il devient vital de réaliser des pages de plus en plus captivantes (du moins en terme d'esthétisme). Pour ce faire, HTML offre, depuis déjà fort longtemps, un grand nombre de tags HTML permettant de rendre vos documents visuellement attirant. Cependant un problème est rester sans solution (du moins en HTML) : comment faire en sorte de rapidement changer les caractéristiques d'un certain nombre de tags, sans devoir les traiter un par un.

En effet, si réaliser des documents agréable à visionner est devenu un impératif, il faut alors se rendre à l'évidence qu'ils ne devront pas non plus trop rapidement vieillir. Mais qu'est ce que cela veut dire de vieillir pour un ensemble de documents Web : c'est simple le contenu ne doit pas devenir obsolète (là il n'y rien d'autres à faire que de maintenir l'information : cela peut prendre du temps) et les internautes ne devront pas se lasser de l'aspect visuel de vos pages. Sur ce dernier point, il faut comprendre que si tous les paragraphes (pourquoi pas 4000) sont colorés en bleu (par exemple) par le biais de tags HTML, et si la couleur lasse, il va falloir faire un grand nombre (4000 minimum) de manipulations fastidieuses et rébarbatives.

Si par contre, les aspects visuels d'un ensemble de documents (en opposition à la structure et au contenu de vos documents) se trouvent définis en un seul point, la tâche de mise à jour pourrait en être considérablement réduite. En effet, si en un seul endroit, vous avez dit que tous vos paragraphes seront visualisés en bleu, combien de modifications devrez-vous mettre en oeuvre pour changer en noire la couleur de tous vos paragraphes : et oui, une unique modification (soit 30 secondes).

C'est exactement dans ce but qu'ont été mises en place les feuilles de styles en cascade. Vous allez pouvoir, si vous le désirez, localiser en un seul point, tout l'aspect visuel d'un groupe de pages HTML (voir d'un site Web complet). Il faut cependant noter une chose importante : la recommandation CSS, proposée par le W3C, évolue pour permettre toujours plus de choses. Les implémentations des navigateurs n'évolutent pas forcément toutes à la même vitesse. Du coup les navigateurs ne sont pas tous égaux vis à vis de cette technologie. Actuellement la recommandation CSS 3 est en cours d'élaboration.

Si vous souhaitez voir un exemple concret de site utilisant la technologie CSS, sachez que vous êtes actuellement en train de consulter un tel site. Peut être le savez vous déjà, mais le site web http://www.infini-software.com fournit quelques tutoriaux sur de technologies informatique (XML, ...). Toutes ces pages partagent la même charte graphique.

Il est certes vrai que cette charte graphique est très sobre et simple (mais c'est ce que je recherchai). Malgré cela, tous les paragraphes, tous les titre ainsi que tous les exemples de code présents sont toujours affichés de la même manière. J'utilise une unique feuille de styles : si demain, l'envie me prend de changer radicalement le look du site (ce qui est peu probable), les modifications à apporter seront localisées en un seul et unique endroit.

Comme dit précedement, la technologie CSS à été définie par le W3C (World Wide Web Consortium). Cet organisme à pour but de proposer des sortes de standards pour le web.

En réalité, le W3C est constitué de membres. Ces derniers faisant partie de diverses sociétés évoluant dans le monde du Web (et notamment, Microsoft, Netscape, IBM, Sun, ...). Ce sont tous ces membres qui, ensemble, aboutissent à définir ces standards. Ces standards sont en fait appelés des recommandations.

Vous pouvez donc, sur le site du W3C, consulter en ligne les recommandations CSS. Il existe bien d'autres recommandations, parmi lesquelles : HTML, HTTP, XML, ... La première recommandation CSS (il existe, en effet, plusieurs niveaux de recommandations pour les feuilles de styles) date de décembre 1996.

Nous allons, aux grès des différents chapitres voir un certain nombre de possibilités. Dans certains cas, des commentaires apparaîtront au niveau des définitions de style : le langage CSS le permet en effet.

La syntaxe à utiliser est proche du langage de programmation C. Un commentaire sera donc introduit par les deux caractères /* et se terminera par la séquence inverse */. Pensez, vous aussi, à commenter vos définitions de style : cela vous simplifiera leur compréhension, lorsqu'il vous faudra les remettre à jour.

L'exemple qui suit (le premier de ce tutorial), vous montre un exemple de commentaire en CSS ainsi qu'une définition permettant de décorer les paragraphes HTML (ils commencent par le tag <p>.

/* Cette règle spécifie un style pour tous les paragraphes */
p {
    font-family: verdana, arial;
    color: #A0E0FF;
    text-indent: 15px;
    text-align: justify;
}