Auteur: Jérôme Forget. Publié le 5 février 2007.
Il existe trois méthodes pour appliquer des styles CSS à un document XHTML, selon que l'on applique des feuilles de style CSS externes, des styles déclarés à même le document XHTML ou dans chacune des balises. Nous n'utiliserons généralement que la première de ces méthodes, qui offre le plus d'avantages.
Cette méthode permet de séparer le contenu du document XHTML des régles CSS permettant la mise en page et le design de ce document. Elle permet également de conserver dans un seul et même fichier toutes les informations concernant la présentation du document, permettant ainsi des modifications rapides au design d'une page Web.
Voyons comment fonctionne la balise <link> :
<link rel="stylesheet" type="text/css" href="feuille1.css" media="all" />
Le but premier de cet élément HTML est de lier tout document externe au document XHTML contenant la balise <link>. CSS utilise cet élément pour lier une feuille de style externe à un document XHTML.
Afin de fonctionner correctement, la balise <link> doit être placée dans l'en-tête du document - c'est-à-dire à l'intérieur de la balise <head>.
Une feuille de style CSS externe est un document portant l'extension .css. C'est un document contenant uniquement des règles CSS.
Les attributs de la balise <link> sont relativement simples à comprendre :
Notez qu'il est possible d'utiliser plusieurs feuilles de style à la fois dans un même document, en utilisant deux balises <link>.
<link rel="stylesheet" type="text/css" href="base.css" media="all" />
<link rel="stylesheet" type="text/css" href="accueil.css" media="all" />
À l'intérieur de la balise <style> - ou d'une feuille de style CSS externe -, on peut employer la règle @import un peu comme on se sert de la balise <link>. Cette directive permet encore là d'inclure une feuille de style CSS externe au document.
@import url(feuille2.css);
<style type="text/css">
@import url(style.css); /* l'importation arrive en premier */
h1 {color: grey;};
</style>
Plusieurs directives @import peuvent être utilisées pour charger et combiner plusieurs feuilles de style. Cela peut être utile pour séparer les règles CSS concernant la typographie, les couleurs, la mise en page, etc.
@import peut être extrêmement utile dans une feuille de style externe qui nécessite certains styles que l'on trouve dans une autre feuille de style externe. Comme les feuilles de style ne peuvent utilisées la balise <link>, la directive @import est la seule alternative.
@import url(http://exemple.org/lib/typo.css);
@import url(layout.css);
@import url(impression.css) print;
body {color: blue;}
h1 {color: red;}
La directive @import a aussi un autre avantage : elle est trop récente pour les vieux navigateurs comme Netscape 4.x. L'importation des feuilles de style échoue sur les navigateurs qui ne comprennent pas cette directive CSS2. Ainsi, l'utilisateur visionne le document sans feuille de style, plutôt que de voir une feuille de style mal interprétée.
On peut de cette façon servir une feuille de style de base, avec des règles CSS connues de tous les navigateurs, à l'aide de la balise <link>, alors que d'un autre côté, on importe des feuilles de style riches et modernes à l'aide de @import. Cette technique des deux feuilles
peut s'avérer extrêmement efficace là où l'on souhaite demeurer accessible à un vaste public, sans compromettre un design visuel attirant.
Insérer des styles CSS directement dans le document XHTML peut être une façon simple et rapide de modifier la présentation d'une page Web. Cependant, les styles ajoutés avec ces méthodes ne s'appliqueront qu'au document dans lesquels ils sont déclarés. Nous préférons généralement inclure des feuilles de style externes afin de pouvoir les appliquer à l'ensemble d'un site Web.
La balise <style> permet d'ajouter facilement des styles CSS à un document XHTML. Cette balise apparaît aussi dans l'en-tête du document XHTML.
<style type="text/css">
Ici, il est important de toujours spécifier la valeur text/css à l'attribut type. Il est aussi possible d'utiliser l'attribut media comme pour la balise <link>.
Cette méthode est simple mais peu efficace car elle attache les styles CSS à chacune des balises XHTML, au lieu de regrouper les styles CSS en un même endroit.
<p style="color: grey;">J'aime manger des crêpes au déjeûner.</p>
Même si cette méthode peut servir à ajouter rapidement du style à une balise, elle n'est généralement pas recommandée. Cette méthode rend en effet toute modification importante au design du site Web extrêmement fastidieuse.