Utiliser des styles CSS

Utiliser des Styles CSS

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 :

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 placées entre les tagset.
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 tagset, 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..