Chapitre 9 HTML, les feuilles de style

Très fortement « inspiré » de Notes de cours sur les feuilles de style de Fabien Torre
(http://www.grappa.univ-lille3.fr/~torre/guide.php?id=courscss)

9.1 Motivations

Il semble maintenant acquis que les balises de mise en page (comme FONT par exemple) seront bientôt exclues du langage HTML et les navigateurs futurs pourront ne pas supporter ces balises.

Il s'agit d'un paradigme général consistant à dissocier le contenu d'un document de sa forme. Ici, il semblerait donc que le langage HTML soit destiné à décrire le contenu, les feuilles de style dont nous allons discuter dans la suite servant elles à décrire la forme du document.

Les intérêts de cette séparation sont nombreux :

un style, appliqué à toutes les pages d'un site, assure la cohérence graphique de ce site ;
la maintenance d'un site en est facilitée, un changement de charte graphique ne portera que sur la feuille de style et la modification sera naturellement propagée à toutes les pages ;
le code HTML est lisible et facilement modifiable, sans que l'on ait à penser en même temps au contenu et à son apparence ;
les pages, dégagées des balises de mise en forme, sont plus légères, donc plus rapides à circuler sur un réseau (la feuille de style est, le plus souvent, très légère et ne sera chargée qu'une seule fois pour l'ensemble des documents qui l'utilisent).

Enfin, précisons immédiatement que le couple HTML/CSS ne constitue pas la seule réponse à la motivation contenu séparé de la forme, citons :

le contenu peut-être stocké dans un fichier XML ; l'apparence peut alors à nouveau être décrite dans une feuille de style, ou confiée à des traitements plus puissants ;
le contenu peut-être stocké dans une base de données, la mise en forme étant confié à un programme, en PHP par exemple (la production de son programme pouvant très bien être du code HTML associé à une feuille de style).

9.2 Généralités

La solution retenue pour décrire des mises en forme se nomme donc feuilles de style ou, en anglais, Cascading Style Sheets (CSS). (Ici en cascade signifie prise en compte des feuilles du navigateur, de l'utilisateur, puis de l'auteur). On peut remarquer un lien très fort avec les modèles de document des traitements de texte (quand ils sont correctement utilisés).

La spécification CSS level 1 (http://www.w3.org/TR/REC-CSS1) date de 1996. Elle est maintenant supportée par les navigateurs suivants :

Mozilla 1.1
Phoenix 0.4
Netscape 6
Konqueror 2.2.1
Galeon 0.12.1
Internet Explorer 5.5
Opera 4

(La notation Mozilla 1.1 signifiant : Mozilla depuis la version 1.1. Mozilla, au moment où j'écris ces lignes, en est à la version 1.3 qui, bien entendu, supporte aussi les feuilles de style. La même remarque est valable pour les autres navigateurs cités.)

Cependant, ces navigateurs gèrent souvent une même feuille de style de manière différente... Après avoir écrit une feuille de style, il conviendra donc de vérifier l'apparence du document avec un maximum de navigateurs.

Enfin, et surtout, il faut s'assurer impérativement que le document reste lisible même sans la feuille de style.

9.3 Inclusion dans une page HTML

9.3.1 Dans une balise, avec l'attribut STYLE

Par exemple : <B STYLE="color:silver;">

9.3.2 Dans l'en-tête, après la balise TITLE

Entre <HEAD> et </HEAD> on peut écrire par exemple :

  <STYLE TYPE="text/css">
    bla bla feuilles de style
  </STYLE>

9.3.3 Fichier externe

Dans un fichier texte *.css (pas de balise STYLE). On ajoutera alors dans l'en-tête du fichier HTML (entre <HEAD> et </HEAD>) :

  <LINK REL="stylesheet" TYPE="text/css" HREF="bla.css">

9.4 Mise en oeuvre

9.4.1 Sélecteurs de types

C'est la syntaxe de base : une balise HTML (ou une liste de balises) (sans < ni >), suivie d'accolades dans lesquelles on trouve liste de propriétés suivies de valeurs.

Par exemple :

  H1 {
     font-family: Wide Latin;
  }
  H1,H2,H3 {
     font-family: Wide Latin, Arial Black, Helvetica, sans-serif;
     color: red;
  }
  P {
     color: blue;
  }

La présentation (saut de lignes, espaces, etc.) n'a aucune importance.

9.4.2 Sélecteurs d'attributs (`CLASS` ou `ID`)

On peut définir une classe pour une balise donnée, le style ne s'appliquant alors qu'à cette classe. Pour définir la classe ecolo dans les paragraphes (<P>) on écrira par exemple :

  P.ecolo {
      color: green;
  }

On l'utilisera alors ainsi :

  <P CLASS="ecolo">
  un paragraphe...
  </P>

Plus généralement, on peut spécifier l'apparence d'une classe sans préciser de balise :

  .ecolo {
      color: green;
  }

et écrire ensuite :

  <H1 CLASS="ecolo">Titre militant</H1 CLASS="ecolo">
  <P CLASS="ecolo">
  un paragraphe...
  </P>

Ou encore (identifiant d'une unique occurrence de la balise) :

  #p1 { color: blue; }

qu'on utilisera ainsi :

  <P ID="p1">

9.4.3 Par contexte

Par exemple, pour définir une présentation différente des éléments de liste suivant leur profondeur :

  UL LI { font-size: small}
  UL LI LI { font-size: x_small}

Ou par héritage d'un ascendant quelconque :

  .Prof H1 { color: red; }

Ou par héritage de l'ascendant direct :

  Body ~P { color: red; }

9.4.4 Par pseudo-classes

On peut définir aussi des pseudo-classes :

`A:link`
`A:hover`	(passage de souris)
`A:active`
`A:visited`	prioritaire sur les précédents... ne pas utiliser mais préférer le VLINK de la balise BODY
`P:first-line`
`P:first-letter`
`p.ecolo:link {color: lime}`
`p.ecolo:visited {color: olive}`

9.4.5 Mise en page des listes, changement de la puce

  list-style-type
  list-style-image
  list-style-position
  list-style

9.4.6 Noms génériques de familles de polices

`serif`	(Times, etc.)
`sans-serif`	(Arial, Helvetica, etc.)
`cursive`
`monospace`	(machine à écrire comme Courrier)
`fantasy`

9.4.7 `DIV` et `SPAN`

Permet de délimiter une zone de texte : DIV pour les blocs de texte (à la manière d'un paragraphe), SPAN pour une suite de mots dans un texte.

On indiquera une classe pour ces zones, classe dont l'apparence sera spécifiée dans la feuille de style.

9.5 Liste exhaustive

Vous pourrez trouver une liste exhaustive des propriétés existantes sur ces pages :
http://www.grappa.univ-lille3.fr/~gonzalez/enseignement/commun/css/style.php
http://www.grappa.univ-lille3.fr/~torre/guide.php?id=courscss

9.6 S'amuser avec les feuilles de style

9.6.4 Des exemples pratiques

Vous trouverez sur cette page des exemples pratiques pour vous convaincre de l'utilité (et de la nécessité) d'utiliser des feuilles de style :

http://www.grappa.univ-lille3.fr/~torre/guide.php?id=tpcss

D.Gonzalez (gonzalez@univ-lille3.fr) en date du th ,