CSS : Cascading Style Sheets

Utilisation

Afin que les règles d'un fichier CSS s'appliquent à un document HTML ou XML, il faut utiliser un syntaxe spéciale indiquant au navigateur d'utiliser la feuille de style pour le rendu du document. Cette syntaxe diffère selon le type du document.

Dans un fichier XML

Le langage XML étant exclusivement structurel, il ne prévoit aucune syntaxe pour préciser des informations de présentation au sein des balises du document.

Il faut donc utiliser les instructions de traitement (<? ... ?>) destinées aux navigateurs pour lui indiquer l'adresse de la feuille de style à prendre en compte pour le document. Cette instruction se place au début du document après l'instruction XML.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="/theme/style.css"?>
...

Voici le détail de cette syntaxe :

xml-stylesheet
Cette instruction de traitement indique au navigateur que l'on va lui indiquer une feuille de style à appliquer à notre document.
type="text/css"
Nous indiquons au navigateur que la feuille de style que nous indiquons est de type text/css. Il s'agit du type MIME correspondant aux feuilles de style écrites en CSS.
href="/theme/style.css"
Nous indiquons où trouver la feuille de style. Cette valeur est une URI, elle peut donc être absolue ou relative au document.

Il est possible de spécifier plusieurs feuilles de style dans un document XML en précisant plusieurs instructions <?xml-stylesheet?>.

Dans un fichier HTML

Dans une page HTML, il est possible d'indiquer des informations supplémentaires concernant le document dans la section <head>.

Afin d'ajouter une feuille de style, il faut utiliser l'élement <link> qui permet de spécifier des ressources en rapport avec le document HTML.

<head>
...
    <link rel="stylesheet" type="text/css" href="/theme/style.css"?>
</head>
rel="stylesheet"
Cet attribut permet d'indiquer la relation entre le document et le document lié par la balise <link>. Dans notre cas, stylesheet indique qu'il s'agit d'une feuille de style à appliquer au document. Il aurait été possible d'utiliser aussi alternate stylesheet afin d'indiquer une feuille de style alternative, c'est-à-dire une autre feuille de style pour le document que l'utilisateur pourrait changer en utilisant un menu de son navigateur.
type="text/css"
Nous indiquons au navigateur que la feuille de style que nous indiquons est de type text/css. Il s'agit du type MIME correspondant aux feuilles de style écrites en CSS.
href="/theme/style.css"
Nous indiquons où trouver la feuille de style. Cette valeur est une URI, elle peut donc être absolue ou relative au document.

Il existe d'autres attributs optionnels qui peuvent être intéressants :

title="Thème 1"
Il est possible d'indiquer un titre à une feuille de style. C'est généralement conseillé dans le cas d'utilisation de feuille de style alternative. En effet, la spécification dit qu'une feuille de style qui n'a pas de titre est considéré comme globale, et s'appliquera quelle que soit la feuille de style alternative sélectionnée.
media="screen, handheld"
Cet attribut indique sur quels types de média peut s'appliquer la feuille de style. Le média peut être considéré comme un type de représentation dans un navigateur. Il existe par exemple screen pour les navigateurs graphiques, print pour les impressions de document, speech pour les navigateurs vocaux. La liste complète est disponible dans la spécification CSS.

Il existe une autre syntaxe pour les documents HTML qui permet de directement écrire les règles CSS dans le fichier HTML. Cette syntaxe utilise l'élément <style> plutôt que <link rel="stylesheet">.

<style type="text/css">
...
Règles CSS
...
</style>

Cette syntaxe n'est pas utilisée en dehors d'un cadre de test car elle ne permet pas de partager les informations de présentation entre différents fichiers, et ne permet donc pas de profiter du gain de bande passante et de la facilité de maintenance.

Dans un fichier XHTML

La norme XHTML étant une réécriture de la norme HTML en utilisant le format XML, les deux syntaxes ci-dessus sont théoriquement utilisables.

Cependant, la 1re syntaxe n'est utilisable que lorsque le document est considéré comme un document XML, ce qui n'est pas encore supporté par certaine anciens navigateurs (Netscape 4, Internet Explorer 6, etc).

Il est donc conseillé de toujours utiliser la méthode HTML pour spécifier sa feuille de style afin de garantir une utilisation de la feuille de style dans tous les navigateurs.