Inclure des styles CSS dans vos pages XHTML

Il existe trois façons de définir une feuille de style. Nous allons voir dans ce tutoriel quelles sont les possibilités pour utiliser CSS dans un document XHTML.

Définition CSS spécifique en ligne

On peut définir individuellement un (ou plusieurs) style(s) pour un mot ou paragraphe de page par exemple. Cela consiste donc à intégrer les styles dans le corps du document XHTML.

Code CSS :

<p style="font-size: 15pt ;" >

L'utilisation de cette méthode revient au même que celle de faire les fonts et présente les mêmes inconvénients. Elle ne semble intéressante que lorsque le style que vous aller définir est vraiment spécifique à cet endroit. Autrement dit, au cas où vous pensiez réutiliser le même style à un autre endroit, il vaut mieux utiliser les méthodes suivantes.

Méthode CSS interne

Cette deuxième méthode consiste à mettre le style dans l'entête de la page. La syntaxe est incorporée à l'entête du fichier XHTML entre les balises <style type="text/css"> .... </style> placées entre les tags <head> et </head>.

Le style ainsi défini peut être appliqué à tous les endroits de la page, sans avoir à redéfinir les propriétés. Néanmoins, cela nécessite d'inclure le code du style à l'entête de chaque fichier, et de le répéter pour tous les fichiers. Donc ce n'est pas encore optimal.

Méthode CSS externe

En linking, vous utilisez un fichier séparé, indépendant du code XHTML, et qui porte l'extension .css. ( ou n'importe quelle autre extension, celle-ci présentant l'avantage de savoir qu'il s'agit d'un fichier de feuilles de style.).

Ce fichier contient tous les styles CSS utilisés dans toutes les pages. Vous placez une simple ligne (toujours la même) qui servira à appeler le fichier .css entre les tags <HEAD> et </HEAD>, et votre fichier est opérationnel.

Cette méthode présente divers avantages par rapport au deux précédentes :

  • Les définitions de style ne sont faites qu'une seule fois, à un seul endroit
  • Cela vous réduit considérablement la taille de votre page XHTML
  • Les navigateurs peuvent mettre en cache le contenu de la feuille de styles qui s'appliquera sur toutes les pages du site. Une fois cette mise en cache effectuée, le navigateur n'aura plus qu'à charger le contenu de la page. D'où une forte réduction du temps de transfert.
  • Cela facilite la maintenance. Vous n'avez qu'à manipuler un seul fichier lorsque vous voulez modifier un tel ou tel aspect de votre site.
  • Cela donne une meilleure structuration de votre page puisque que le contenu lui-même est séparé de la forme.
  • Il est possible de créer des règles d'appel à ce fichier : Si c'est un "ordinateur" (ou plus exactement un "écran") qui appelle la page alors on lui envoie le fichier CSS destiné à l'écran. Si c'est l'imprimante, alors on lui envoie le fichier CSS pour l'imprimante, etc..

Et il est donc possible, comme son nom l'indique (Cascade Stylesheet), de définir des styles "en cascade", en fonction des pages, et de l'environnement (écran, imprimante, flux RSS, etc...).

Comment attacher une feuille de style à un document XHTML :

Dans un fichier style.css, vous mettez par exemple le contenu de votre style :

Code CSS :

menu{
font-size :12px ;
font-weight :900 ;
}

Dans un premier temps il est important que vous compreniez le principe et l'organisation des fichiers. Pour l'instant ne vous inquiétez pas si vous n'arrivez pas à traduire ce qui est écrit dans ce fichier : Patience. Ensuite vient le moment de l'attacher au document XHTML.

Dans l'entête de chacun de vos fichiers, il y a juste à rajouter une ligne pour inclure le fichier style.css :

Code CSS :

<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>

Il faut donc spécifier dans href le fichier à inclure. L'attribut média permet de spécifier le type de média auquel le style sera appliqué. Le média peut aussi bien être l'ordinateur qu'un téléphone portable, une imprimante, etc...

Vous avez peut être vu quelque part une autre syntaxe comme ceci, toute aussi applicable :

Code CSS :

<style type="text/css">
@import url(style.css) ;
</style>

Il est possible, comme nous l'avons vu plus haut, d'incorporer plusieurs lignes de style, comme ceci (principe des 'cascades' ) :

Code CSS :

<head>
<link href="style-1.css" rel="stylesheet" type="text/css" media="all">
<link href="style-2.css" rel="stylesheet" type="text/css" media="print">
</head>

Une question ? Venez la poser sur notre forum développement web !

A propos de l'auteur

Nicolas Galle

Nicolas Galle est développeur indépendant.

Newsletter Marketing

Vous consultez la page Styles CSS : Un Style Dans Une Feuille De Styles CSS. Utiliser des styles CSS en ligne, en entetes ou dans une feuille de style. Voici un tutoriel CSS sur l'utilisation des styles dans un document XHTML.