Le codage des feuilles
de style à la main

Page précédente

Feuilles de style locales

Le plus simple pour entamer notre survol du codage manuel des feuilles de style est de commencer par les feuilles de style locales. C'est ce qu'on devrait utiliser le moins souvent possible, pour des raisons qui vont s'éclaircir peu à peu (du moins l'espérons-nous :-), mais c'est le plus facile à expliquer.

Imaginons qu'on veuille mettre un morceau de texte en bleu et avec des caractères plus grands que dans le reste du paragraphe. Il suffira de l'enserrer dans une balise <span>... </span> avec un attribut de style style="..." spécifiant la couleur et la taille des caractères :

<span style="color:blue; font-size:larger;">un morceau de texte en bleu ... ...plus grands</span>

Pour appliquer cet effet à tout un paragraphe, il suffirait de placer ce même attribut de style dans la balise de paragraphe <P style="...">... </P> (attention, avec les CSS, il est impératif de toujours fermer les balises HTML).

La feuille de style locale est ce qui se trouve entre les guillemets de l'attribut de style. Elle est composée ici de deux instructions, chacune d'entre elles comprenant 4 parties :

  1. le nom d'une propriété de style (ici : color ou font-size)
  2. un deux-points, séparateur obligatoirement accolé à la propriété
  3. une valeur attribuée à la propriété (ici : blue, ou larger).
  4. un point-virgule obligatoire pour indiquer la fin de l'instruction (nécessaire car la valeur se compose parfois de plusieurs mots). Seule la toute dernière instruction pourrait se passer de ce point-virgule, mais il est plus prudent de le maintenir.
    Les espaces ou retours à la ligne éventuels ne sont pas pris en compte.

On peut enchaîner autant d'instructions que l'on veut ; les noms des propriétés et des valeurs qu'on leur attribue doivent respecter les recommandations officielles (toute erreur entraine l'annulation de l'instruction).


(retour au menu)

Feuilles de style internes

On s'en sert pour des définitions de style dont on se servira dans toute la page. On les code de la manière suivante : 
<style type="text/css">
<!--
      ...déclarations de style...
-->
</style>
où toutes les déclarations sont bâties de la même façon :
sélecteur{ instruction1  instruction2... }
Par exemple, la déclaration pour avoir des caractères bleus et de taille 1.25em dans tous les paragraphes serait 
       P {font-size:1.25em; color:blue;}
c'est-à-dire que les instructions sont les couples propriété:valeur; que nous avons vus plus haut, tandis que le sélecteur est ici la balise HTML « P » des paragraphes. Plus généralement, il y a quatre grandes catégories de sélecteurs possibles, correspondant aux quatre familles de déclarations suivantes :
  1. Redéfinition des balises HTML
    Exemple : BODY {font-family:verdana; color:black;}
    A noter qu'on peut mettre plusieurs balises HTML dans le même sélecteur :
       BODY,P,TD {font-family:verdana; color:black;}
    L'effet est de donner le même style à toutes les balises citées. Dans cet exemple, les paragraphes (P) et les cellules de tableau devraient hériter du style général de la page (BODY), mais certains navigateurs sont parfois un peu sourds (:-), et cette écriture permet d'éviter les répétitions. On peut ensuite reprendre une des balises déjà utilisées pour compléter son style dans une deuxième déclaration. Par exemple, on peut prendre
       BODY,P,TD {font-family:verdana; color:black;}
       TD {font-size:smaller;}
    afin d'avoir des cellules de table avec la même police et la même couleur que dans le restant de la page, mais en plus petit.
  2. Définition de classes de style
    Exemple : .rouge {color:red;}. (noter l'emploi du point dans le sélecteur ; on peut mettre ensuite le nom que l'on veut.)
    Le style ainsi défini pourra ensuite être appliqué à n'importe quel élément HTML en glissant l'attribut de classe correspondant dans sa balise, comme par exemple <span class="rouge">... </span> ou bien <td class="rouge">... </td> (mais cette fois, sans le point dans le nom de classe). Nous reviendrons plus loin sur cette notion de classe de style.
  3. Définition de pseudo-classes
    Exemple : a:hover {color:red; font-weight:bold} (noter la présence du deux-points dans le sélecteur ; le nom qui suit est obligatoirement l'un des noms fixés dans les CSS).
    C'est avec ce genre de pseudo-classe qu'on modifie le rendu des liens. Nous reviendrons sur ces classes et pseudo-classes un peu plus loin.
  4. Définition de style par identificateur de blocs
    Exemple : #bloc23 {position:absolute; top:20px;...}
    Le sélecteur est alors formé d'un # et de l'identificateur (ID) d'un des éléments HTML de la page. La suite des instructions de la déclaration va alors constituer le style appliqué à cet élément.
    L'ensemble aurait pu être intégré dans un style local style="..." codé dans l'élément lui-même, mais cette façon de faire sépare plus nettement les instructions de rendu (toutes regroupées dans la feuille interne) et le texte lui-même ; en d'autres termes, on sépare mieux ainsi la forme et le fond de la page.
    On peut également regrouper plusieurs identificateurs dans la zone sélecteur : 
     #bloc23,#bloc#24 {position:absolute; color:blue...}
    au moins pour les propriétés de style communes à tous les éléments concernés, quitte à compléter plus loin pour les propriétés spécifiques aux différents éléments : 
      #bloc23 {top:20px; left:56px;}
		#bloc24 {top:120px; left:240px;}
    etc...
  5. Les quatre types précédents ne constituent que les «grandes» familles de sélecteurs. Il y a aussi des sélecteurs composites, plus complexes, sur lesquels nous reviendrons plus loin.
On peut placer plusieurs feuilles de style internes dans une même page ; tout se passe comme si elles étaient regoupées en une feuille unique, qui s'applique à la totalité de la page (même si on en a écrit un bout tout à la fin de la page). Toutefois, l'une des bases philosophiques des feuilles de style est de séparer le plus possible le contenu de la page et les instructions de mise en forme de ce contenu. Si on adhère à ce principe, on évitera le plus possible les styles locaux et on évitera de découper la feuille de style interne en plusieurs fragments.

De même, cette feuille de style interne est généralement placée dans la section <HEAD>. Elle marcherait aussi bien dans la section <BODY>, mais comme c'est là qu'est la place naturelle du contenu de la page, on tâchera d'éviter cette pratique.


(retour au menu)

Feuilles de style externes

Une feuille de style externe est un fichier texte qui ne contient que des déclarations de style tout à fait semblables à celles d'une feuille de style interne. Le nom de ce fichier doit avoir une extension "css" — par exemple, "mon_style.css". Pour que la page prenne ces déclarations en compte, on la reliera au fichier externe par l'instruction suivante :

<link rel="STYLESHEET" type="text/css" 
               href="mon_style.css">

Bien entendu, si le fichier de style n'est pas au même niveau que la page dans l'arborescence du site, on indiquera la bonne adresse dans le href="...".

Cependant, les recommandations CSS2 ont prévu qu'une même page puisse recevoir des styles différents selon qu'on l'examine sur un écran ou qu'on l'écoute avec un navigateur oral, ou encore qu'on l'imprime. Cela se traduit par l'apparition d'un nouvel attribut "media" dans la balise <LINK> : 

<link rel="STYLESHEET" type="text/css" 
            media="all" href="mon_style.css">

Ce media="all" signifie «pour tous les media» ; on peut aussi avoir media="screen" (pour l'écran), media="print" (pour l'impression), media="aural" (pour écouter) et bien d'autres possibilités encore... mais sans doute pas encore toutes implantées dans les navigateurs actuels.

A première vue, il n'y a donc pas de différence entre les deux <LINK> ci-dessus, puisque les deux seraient toujours appliqués avec ce media="all". En pratique, il y en a une, très importante : parmi les navigateurs qui interprétent les styles, NN4, qui les lit si mal, ne reconnaît pas le deuxième appel. On a donc un moyen d'uniformiser les rendus en faisant deux feuilles de style externes, une première qui sera lue par NN4 avec un <LINK> simple, et une deuxième feuille, destinée aux navigateurs plus conformes aux normes du W3C, qui sera reliée avec un <LINK media="all">.

Malheureusement, il existe des navigateurs alternatifs beaucoup plus récents (iCab, pour MacOS, par exemple), qui ne lisent toujours pas ces <LINK media="all">... et qui affichent alors un rendu malheureux :-(  Il n'y a guère de solution bien commode, sinon attendre que NN4 devienne complètement marginal (ça vient, ça vient...)

Notez enfin qu'il y a d'autres techniques pour faire des feuilles de style multi-media.


(retour au menu)

Commentaires

Quand on doit revenir sur une feuille de style complexe où se sont accumulées un grand nombre d'instructions, il est agréable d'avoir des commentaires qui expliquent à quoi sert telle ou telle déclaration, ou pourquoi on a fait tel ou tel choix dans les rendus. On placera ces commentaires entre les symboles /* et */. Exemple : 

/* pour des explications en petits caracteres :*/
     div.nota  
        {font-size: 87%;  /* OK en dehors de NN4 */
         margin-left: 2em;   
         etc...	 }

(retour au menu)

Classes

A la base, une classe de style est simplement ce que nous avons défini plus haut, c.à.d. une déclaration avec un sélecteur commençant par un point, et susceptible de s'appliquer à n'importe quel élément HTML pouvant recevoir ce style.

Mais on peut aussi spécialiser les classes à telle ou telle balise HTML. Par exemple, 
       P.special{font-size:larger; color:red;}
définit une classe "special" qu'on ne pourra appliquer qu'à des balises <P>.
Remarque : à la limite, un auteur pourrait se construire son propre langage de rendu en utilisant des classes et uniquement des éléments <DIV> ou <SPAN> sans rendu spécifique. L'inconvénient est qu'un navigateur ne lisant pas les styles (et on peut toujours déconnecter cette interprétation pour aller plus vite) ferait de la bouillie d'une telle page. Il vaut mieux continuer à utiliser des balises <P>, <H1>, <H2>, etc... qui, redéfinies ou non par des déclarations de style, maintiendront toujours une certaine structure à la page.

(retour au menu)

Pseudo-classes et pseudo-éléments

Les classes permettent de donner un style à tous les «éléments» d'une page HTML, c'est-à-dire à tout ce qui peut être contenu dans un bloc contrôlé par une balise HTML. Mais ça ne suffit pas. Par exemple, comment mettre des styles sur les différents états possibles des liens (non visités, visités, survolés...), ou sur la première lettre d'un paragraphe (concept de lettrine), ou sur la première ligne d'un paragraphe ? Pour cela, les pères des CSS ont imaginé le concept des pseudo-classes et des pseudo-éléments. Dans toutes les déclarations correspondantes, le sélecteur contient un deux-points.

Les pseudo-classes les plus importantes sont certainement les pseudo-classes de liens:

a:link {...}    pour les liens non visités
a:visited {...} pour les liens visités
a:hover {...} pour les liens survolés
a:active {...} pour les liens «activés» (c.à.d. la souris est dessus, le bouton est pressé le bouton, mais pas relâché)
Par exemple, pour avoir des liens sans soulignement, bleus au repos et rouge sous la souris, on utilisera les déclarations 
         a:link {color:blue; text-decoration:none;}
      a:hover {color:red; text-decoration:none;}
On notera que tous ces sélecteurs sont formés de la lettre "a" (qui correspond à la balise des liens <a href=...>), suivie d'un deux-points et d'un mot spécial. On peut aussi combiner les concepts de classe et de pseudo-classe, pour former des pseudo-classes "link", "visited" sur des classes de liens. Par exemple, les déclarations 
  a.italique:link {color:orange; font-style:italic;} 
  a.italique:visited {color:green; font-style:italic;}  
  a.italique:hover{color:red; font-weight:bold;font-style:italic;}
(en fait la lettre initiale "a" est facultative) conjuguées à des liens de classe italique (c.à.d. avec un codage <a class="italique" href=...>) mettront ceux-ci en italiques, orange au départ, rouge et gras sous la souris, vert après le clic. Démonstration : voyez ici sur ce lien... si votre navigateur le veut bien (en général les styles link et hover marchent très correctement... Je n'en dirais pas autant pour le style visited :-).
Les CSS2 prévoient bien une 5ème pseudo-classe de lien a:focus{...} pour les liens qui viennent d'être activés, mais l'implémentation laisse encore à désirer : parmi les navigateurs qui y répondent, comme IE5 ou NN6 sur Mac, on peut agir sur la couleur (par exemple), mais pas sur le petit cadre qui apparaît autour du lien et que certains trouvent gênant.

Citons enfin deux pseudo-éléments très simples à expliquer :

p:first-letter {...} pour singulariser la première lettre d'un paragraphe
p:first-line {...} pour singulariser la première ligne d'un paragraphe

A titre d'exemple, si votre navigateur le permet, ce paragraphe devrait commencer par une lettrine de taille double et une première ligne spéciale en petites capitales.

Nous reviendrons plus tard sur ces deux pseudo-éléments. En fait, il y en a beaucoup d'autres de prévus dans la norme CSS2, mais nettement plus complexes... et dont l'implantation laisse toujours à désirer en ce début 2002. On se reportera au lien précédent pour en savoir davantage.


(retour au menu)

Sélecteurs composites

Il arrive qu'on veuille associer un style à une balise, mais dans des conditions très particulières :
— par exemple si cette balise est contenue dans une autre (comme des listes <ul> à l'intérieur des cellules <td> d'une table),
— ou bien si elle suit immédiatement une autre balise (comme un titre <h2> juste après un titre <h1>),
— ou bien encore si cette balise contient un attribut particulier.
Tous ces souhaits peuvent se satisfaire en créant des classes ad hoc, mais s'il s'agit de modifier un site existant, il faut ensuite intervenir sur toutes les pages du site. Pour éviter cela, les CSS ont imaginé toute une grammaire des sélecteurs permettant de répondre à un certain nombre de cas. Mais comme cela ne marche que rarement avec les navigateurs du moment, nous allons employer un conditionnel prudent dans ce qui suit.

Par exemple :

TD > UL { instructions...}
appliquerait un style à une liste UL contenue dans une cellule TD de table (sélecteur d'enfant). L'élément modifié doit être un enfant direct du premier élément.

TD   EM { instructions...}
appliquerait un style à un bloc EM contenu dans une cellule TD de table, que ce bloc soit un descendant direct ou non (sélecteur descendant).

H1 + H2 { instructions... }
modifierait le style d'un H2 juste après un H1 (sélecteur d'enfants adjacents)

A[title] {instructions...}
modifierait le style d'une balise A contenant un attribut title (sélecteur d'attribut)

On peut aussi former des pseudo-classes sur ces sélecteurs composites. Par exemple
        A[title]:link, A[title]:hover {font-weight:bold}
permettrait de mettre en gras tous les liens contenant une bulle d'aide par title, à la fois pour le lien normal et le lien survolé, afin de mieux les signaler à l'attention du visiteur. Voyez ces deux derniers liens, tous deux avec une bulle : en cette mi-2002, ça fonctionne bien sur NN6 ou Mozilla ; aussi sur Opera (enfin.., OK sur Windows, mais on se heurte à un bug dans title sur Opera5-Mac) ; pas du tout sur IE5 ou 6 (c.à.d. ces deux liens ne passent pas en gras) :-(.

Retour au menu
Accueil des réponses
Page suivante :
le tour des propriétés