Plan du site | Contact

Comment associer Les style CSS à un document XHTML ou HTML

Il y a plusieurs manières d'appliquer des styles CSS à un document. Ces méthodes sont plus ou moins pratiques en fonction du contexte dans lequel on travaille.

Distinguons d'abord 2 choix possibles.

  1. Les styles sont écrits dans le document même
  2. Les styles sont écrits dans un fichier externe que l'on relie aux documents

Dans la plupart des cas, lorsqu'il s'agit de la réalisation d'un site Internet en séparant la présentation du contenu, le meilleur choix est celui du fichier externe. De cette manière, un seul fichier CSS permettra de contrôler l'ensemble des pages du site et il sera très facile d'effectuer des changements au niveau de la présentation graphique du site. Cette méthode de travail est d'une très grande efficacité.

Si un ensemble de styles doit être appliqué à plusieurs fichiers HTML ou XHTML, il est donc préférable de créer un fichier CSS externe, mais, si le style ne doit être appliqué qu'à un seul document (par exemple une newsletter), il sera peut-être plus avantageux de l'écrire dans le document même. D'autre part, lorsque qu'on utilise une feuille de style externe pour l'ensemble d'un site, il peut être utile, dans le cas où l'on voudrait ajouter des styles à une page particulière, d'utiliser cette méthode pour la page concernée.

Nous commencerons par examiner cette première méthode qui nous donne la possibilité de placer des styles imbriqués ou au fil du texte (c'est presque poétique).

1. Les styles sont écrits dans le document.

Un exemple de style imbriqué :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Atelier CSS</title>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#fffffff;
} -->
</style>
</head>

Les styles CSS s'écrivent dans l'en-tête du document, entre les balises <head> à l'intérieur des balises <style type="text/css"> . </style>

Comme les premières générations de navigateurs Web ne prennent pas en compte le langage CSS, on prévoit le cas où un individu chargerait la page sur un navigateur de ce type en mettant toutes les déclarations CSS entre des balises de commentaires <!-- --> .

Le style au fil du texte.

Il est possible d'appliquer une règle CSS à une balise particulière au moyen de l'attribut style.

Quelques exemples :

<h1 style="font-family: verdana, arial, sans-serif ; color:black"> Titre </h1>
<p style="font-size:x-small"> votre paragraphe de texte </p>

 

Il faut absolument éviter d'avoir recours à cette méthode d'application de style et ne l'utiliser que pour des cas particulier, lorsque, vraiment, il devient impossible de faire autrement.

Pourquoi ? Parce qu'elle surcharge inutilement le code HTML de la page et, finalement, en travaillant de cette manière, on utilise les CSS, mais on n'exploite absolument pas les avantages qu'elles offrent dans la réalisation de document pour le web.

 

2. Les styles sont écrits dans un fichier externe

C'est la meilleure méthode, le plus souple et celle qui permet de profiter véritablement de la conception de site à l'aide des CSS.

Votre fichier CSS peut être intégré de 2 manières dans vos pages HTML ou XHTML.

La balise <style>.

Le document CSS est intégré de cette manière

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

ou avec la directive @import, de cette manière

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

ou

<style type="text/css" media="all">
@import "/style/maFeuilledeStyle.css";
</style>

La plupart des navigateurs compatibles avec les feuilles de styles CSS "comprennent" la méthode du lien (balise <link>) et prennent en charge la feuille de style. En revanche, seuls les navigateurs le plus modernes comprennent la directive "@import" et interprétent de manière quasi-satisfaisante les différentes règles de style. C'est pourquoi cette dernière méthode peut être utilisée pour masquer une feuille de style aux navigateurs qui gèrent mal les styles CSS (navigateurs de version 5.0 et antérieurs).

L'intérêt de masquer une feuille de style à un navigateur est de lui dire "plutôt qu'interpréter n'importe comment mes styles, tu n'en tiens pas compte et tu affiches le contenu de cette page sans aucun style". Ce genre de discours peut sembler un peu dur pour ceux qui n'auront pas le plaisir de voir la merveilleuse présentation que vous avez élaborer avec les CSS. Mais, d'un autre côté, en dépit des navigateurs "préhistoriques" qu'ils utilisent, (pourquoi ne passent-ils pas aux nouvelles versions ?) ils accèderont quand même au contenu de vos pages, rapidement chargées dans leur navigateur.

 

 

En définitive, je pense que la meilleur méthode pour intégrer les style est d'utiliser la directive @import.

 

Accueil | Articles | Tutoriels | Liens

© 2005 thierry françois - réalisation : fknet