Page suivante Page précédente Table des matières

1. Introduction

1.1 À propos de cette documentation

Ce document est rédigé pour être utilisé à la fois comme un guide pour découvrir les CSS et comme un aide mémoire. Il ne se veut aucunement exhaustif. Je vous conseille donc de consulter les références données à la fin pour plus de renseignements.

1.2 Qu'est-ce qu'un CSS?

Les CSS font partie d'un effort du W3C pour différencier le contenu des documents et leur présentation. Le but étant de pouvoir avoir plusieurs présentations pour un seul contenu (format papier, visualisation sur écran, braille, ...).

Un autre but, non négligeable, est de permettre de gérer plus facilement la présentation d'un site. En effet, les CSS permettent de rassembler les directives de présentation d'un ensemble de pages en quelques fichiers. Si l'on désire changer ces directives, inutile de rééditer toutes les pages, seuls les quelques fichiers de présentations sont à modifier et tout le site sera modifié lui aussi. L'intérêt est évident lorsqu'on doit gérer un site d'une centaine de pages.

Enfin, les CSS utilisent la puissance de calcul du client et non du serveur (comme c'est le cas pour les CGI, les SSI ou le PHP3). Ce qui, lorsque le nombre d'accès est grand, est non négligeable.

À l'heure actuelle, la plupart des navigateurs Web gèrent les CSS1 (mais pas tous). La gestion des CSS2 ne devrait plus tarder, des navigateurs comme Mozilla (Netscape 5.0) et Amaya ont déjà des moteurs de rendu qui prennent en compte les CSS2. Ce document ne traite que des CSS1.

1.3 Comment ça marche?

Lorsque le navigateur charge la page HTML, certaines commandes spéciales fixent les propriétés par défaut (le style) des balises courantes.

Cet ensemble de commande peut être accessible directement dans le code HTML de la page ou bien être séparé dans un autre fichier qui est téléchargé en même temps que la page.

On peut ainsi changer la police de caractères, la couleur des titres, l'image de fond, et bien d'autre choses en utilisant un fichier séparé du reste. L'intérêt est que l'on peut centraliser toute la présentation d'un site en un seul endroit.

1.4 La syntaxe de base

Les CSS servent essentiellement à fixer des paramètres de présentation sur les documents HTML. Ils permettent par exemple de fixer la couleur des titres, le fond d'écran, la police de caractères utilisée, ... C'est à dire que l'on fixe, par défaut, les propriétés de certaines balises HTML.

La syntaxe se présente donc ainsi :

BALISE { Propriété: valeur }

Par exemple, la suivante fixe la couleur des titres à « black » : H1 { color: black }

On peut aussi :

1.5 Utilisation des CSS

Il existe quatre façons de faire appel aux CSS dans un fichier HTML :

1.6 Les classes et les identifiants

Un style sur une balise peut-être particularisé par un nom. On appelle ensuite ce style grâce au paramètre CLASS. Cela permet d'utiliser plusieurs styles différents sur la même balise.

Par exemple :


<HEAD> 
  <TITLE>Titre</TITLE> 
  <STYLE TYPE="text/css">H1.exemple { color: red } </STYLE> 
</HEAD>

<BODY> 
  <H1 CLASS=exemple>texte</H1>
...
</BODY>

Si la balise est omise, toutes les balises seront affectées :

<STYLE TYPE="text/css">.exemple { color: red } </STYLE>

Un style peut être également identifié par une ID qui doit être unique dans tout le document, le style est alors défini par son nom précédé par le caractère #.


#etiq1001 { color : red } 
H1#etiq1002 { color : green } 
<P ID=etiq1002>Texte</P>

1.7 Les URL

Les URL doivent être précédées de l'appel de fonction url.

Exemple :

BODY { background: url(http://www.monsite.fr/gif/caution.gif) }

ATTENTION! : Les URL relatives sont interprétées par rapport à la source de la feuille de style et non pas par rapport à la source du document.


Page suivante Page précédente Table des matières