2. Notions fondamentales

Commençons par quelques définitions couramment utilisées dans cet ouvrage.

Feuille de styles CSS

Une feuille de styles CSS est composée d’un suite de caractères. Son contenu est fait d’informations conformes à la syntaxe générale des CSS et interprétables par un analyseur CSS. Il s’agit d’une succession de conditions d’application de styles que doivent remplir les éléments d’un document.

Une feuille de styles CSS est composée d’une suite d’affectations et éventuellement de commentaires.

Jeu de caractères

Le jeu de caractères standard des CSS est Unicode (ISO 10646). Ce jeu universel regroupe la plupart des jeux de caractères en usage dans le monde. On y trouve aussi bien le malayalam que le japonais, le coréen (hangul) que le yiddish, mais aussi l’ensemble des caractères dits latins, l’arabe, etc.

Il est possible d’insérer un caractère Unicode qui ne correspond pas à une séquence de touches du clavier par l’appel d’une séquence d’échappement. Toute séquence composée d’un backslash \ suivi d’au maximum six chiffres hexadécimaux (de 0 à 9 puis de A à F) doit être considérée comme le caractère ISO 10646 du code hexadécimal donné. Si la séquence hexadécimale comporte moins de six chiffres, insérez éventuellement un espace pour la séparer des caractères suivants : "\33A coucou" et "\00033Acoucou" sont équivalents.

Pour assurer une meilleure lisibilité de la feuille de styles, il est possible d’insérer dans une chaîne de caractères un retour chariot non codant. En ce sens, faites précéder un retour chariot « normal » d’un backslash. Par exemple, la chaîne de caractères

"bonjour \
daniel"

contient en fait " bonjour daniel ". Dans ce contexte, le backslash n’est ici qu’une séquence d’échappement, il est ignoré. Ce mécanisme permet donc de présenter une seule et même chaîne sur plusieurs lignes sans en corrompre le contenu.

Vous pouvez également insérer dans une chaîne les caractères délimiteurs de la grammaire des CSS, comme l’accolade ou les guillemets, en les faisant précéder d’un backslash. Ainsi, le contenu de la chaîne "il a dit \"bonjour\"" est :

il a dit "bonjour"

Comme dans la plupart des langages de description ou de programmation, la notion d’espace doit être prise au sens large. Les caractères du tableau suivant sont tous interprétés comme un espace s’ils sont utilisés hors d’une chaîne de caractères :

Identificateurs

Les CSS comprennent de nombreux identificateurs qui sont des constantes du langage. Ces identificateurs peuvent décrire une propriété, la valeur d’une propriété, un attribut sur la valeur d’une propriété, etc.

Un identificateur ne doit pas être encadré par des apostrophes ou des guillemets. background et black sont des identificateurs CSS valides alors que "background" et ’black’ n’en sont pas.

Les identificateurs CSS ne sont pas sensibles à la casse. En d’autres termes, peut importe que vous utilisiez des majuscules ou des minuscules, elles sont strictement équivalentes, donc traitées sans distinction. font-family et FONT-family sont équivalents, ainsi que color et CoLoR , ou encore teXT-decoRAtion et teXT-DECORAtion .

Un identificateur se compose de lettres (de a à z et de A à Z) , de chiffres (de 0 à 9) , du tiret  - ou de caractères ISO 10646 de code supérieur ou égal à 161 décimal. Cependant, le premier caractère ne peut être un tiret ni un chiffre, à moins que vous n’utilisiez une séquence d’échappement de caractère ISO 10646 commençant par un backslash. Par exemple, \000032eme-fois peut être une constante du langage valide tandis que 2eme-fois ne peut l’être malgré leurs significations identiques.

Ces règles peuvent paraître particulièrement compliquées. En fait, il est important qu’un identificateur CSS puisse commencer par un chiffre, par exemple pour raisons de compatibilité ascendante avec certains produits. Grâce au backslash, il est possible de différencier 12pt (12 points typographiques) de 12pt (l’identificateur 12pt) ?

Commentaires

Tout langage de description ou de programmation permet l’insertion de commentaires pour la compréhension et la maintenance ultérieure. Dans une feuille de styles CSS, un commentaire commence par les caractères slash et étoile /* et se termine par étoile et slash */ . Vous pouvez placer ces délimiteurs absolument n’importe où, excepté à l’intérieur d’une chaîne de caractères :

H1 /* affectation de couleur aux H1*/ {
   color : red }

Affectations

Une feuille de styles CSS est composée d’affectations. Il existe deux types d’affectations  : les règles et les règles-at .

Entre deux affectations, on peut trouver un nombre illimité d’espaces.

Règles

Les règles sont le cœur des feuilles de styles CSS et font l’objet de la plupart des chapitres de ce livre.

Chaque règle est composée de deux parties : les sélecteurs et un bloc de déclarations.

Les sélecteurs précèdent l’accolade ouvrante du bloc de déclarations de la règle. Attention, il est possible qu’un sélecteur contienne une accolade qui n’introduit pas un bloc ; dans ce cas, elle est précédée par un backslash. Dans l’exemple qui suit, les sélecteurs sont en gras :

X Y[ATTRIBUTE="\{"] { color :red }

Les déclarations contenues dans le bloc sont séparées par des points-virgules :

{ color : black ;
  background : red ;
  text-decoration : underline }

Règles-at

Une règle-at est toujours déterminée par un identificateur immédiatement précédé du caractère @ .

Une règle-at commence donc par @ et se termine soit par un point-virgule, soit par l’accolade fermante d’un bloc. Dans l’exemple qui suit, les règles-at sont en gras :

@import "toto.css"

@media tv {
    H1 { font-size : 22pt }
} H2 { font-size : 18pt }
P.important { color : red }

Bloc

Un bloc est l’ensemble constitué par une accolade ouvrante (left curly brace en anglais) et tout ce qui suit jusqu’à l’accolade fermante (right curly brace ) correspondante.

Un bloc peut contenir des parenthèses, des crochets (brackets), des guillemets, des apostrophes ou accolades, mais nécessairement par paires ouvrantes-fermantes. De même, les apostrophes et guillemets délimitant les chaînes de caractères doivent être présents par paires. Il est possible d’utiliser une accolade dans une chaîne de caractères contenue dans un bloc en utilisant la séquence d’échappement par backslash. Par exemple :

{ content : " \"\{\# est une accolade ouvrante" }

Déclarations

Une déclaration est composée d’un nom de propriété CSS, en l’occurrence un identificateur, suivi de deux-points ( : ) et d’une ou plusieurs valeurs. Le nom de la propriété CSS et les valeurs associées à cette propriété définissent le style qui sera appliqué à un élément vérifiant le sélecteur précédant la déclaration. Dans l’exemple qui suit, la déclaration est en gras :

H1 { color : blue }

Cette règle signifie que tous les éléments H1 seront restitués en caractères bleus.

Chaînes de caractères

Les chaînes de caractères en CSS sont encadrées soit par des apostrophes «  '  », soit par des guillemets «  "  ». Une chaîne entourée d’apostrophes ne peut contenir une nouvelle fois ce caractère si vous ne le faites pas précéder d’un backslash. Il en va de même pour une chaîne entourée de guillemets.

Pour insérer un retour chariot codant dans une chaîne de caractères, il faut utiliser le caractère Unicode correspondant, soit \00000A . Par exemple "Une chaîne de caractères \00000Acontenant un retour chariot codant".

Nombres

Les valeurs numériques dans une feuille de styles CSS sont de deux types : entiers ou réels.

Les entiers sont constitués d’une suite de chiffres (de 0 à 9 ), éventuellement précédée de + ou de -  : 12 , +375 , -17 .

Les réels sont constitués d’une suite de chiffres (de 0 à 9) , suivie d’un point, puis d’une suite de chiffres. Un réel est éventuellement précédé de + ou -  . La virgule n’est pas un séparateur valide entre la partie entière et la partie fractionnaire d’un réel. Les nombres qui suivent sont des réels valides : 0.157 , -3.14159 , +2.7182818 .

Longueurs

Les unités de longueur sont utilisées par les propriétés exprimant une distance, qu’il s’agisse de la définition d’une position, ou d’une taille. Par exemple, pour définir la taille de la marge précédant un titre H1 , on écrit :

H1 { margin-top : 1cm }

Une longueur est un nombre entier ou réel, positif ou négatif, immédiatement suivi d’un identificateur d’unité (centimètres, points...). Aucun espace ne doit figurer entre le nombre et l’identificateur.

Quand elle s’applique à une longueur, la valeur 0 n’a pas besoin d’être suivie de l’identificateur d’unité car 0 représente bien la même valeur physique dans toutes les unités de longueurs.

Il existe deux types d’unités de longueur : les unités absolues et les unités relatives.

Cinq unités absolues de longueur sont disponibles :

Prenons un exemple :

H1 { font-size : 2cm }
DIV.abstract { margin-left : 2.54cm ;
               margin-right : 1in }

Contrairement aux longueurs absolues, les longueurs relatives sont toujours calculées par rapport à une autre longueur :

Unité em

Un em est une unité arbitraire définie à partir de la taille de fonte courante, contenue dans la valeur de la propriété font-size . Elle correspond à la définition française du cadratin, espace blanc carré utilisé en typographie dont le côté est égal à la taille des caractères. Le demi-cadratin est important dans le cadre d’une poésie par exemple : si les vers ne sont pas tous composés du même nombre de pieds, chaque vers a une marge gauche égale à autant de demi-cadratins qu’il lui manque de pieds par rapport au vers le plus long.

Considérons l’exemple suivant :

P { margin-left : 2em }

La largeur de la marge gauche associée à un paragraphe est définie comme le double de la taille de fonte utilisée pour la restitution du paragraphe.

Lorsqu’elle figure dans la définition de la taille de fonte d’un élément, une telle unité dépend alors de la taille de fonte définir par l’élément parent :

LI LI { font-size : 0.8em }

La taille de fonte utilisée dans un item d’une liste contenue dans l’item d’une liste de plus haut niveau correspond à 80% de la taille de fonte utilisée dans la liste supérieure.

Prenons un exemple de liste :

<UL>
  <LI>Bonjour; ceci est l'item 1 de la liste englobante
      <UL>
        <LI>et ici l'item 1 de la sous-liste</LI>
        <LI>item 2 de la sous-liste</LI>
      </UL></LI>
  <LI>item 2 de la liste englobante</LI>
</UL>

On obtient :

Figure 2–1 : Usage de l’unité em

Unité ex

Un ex est une unité arbitraire correspondant à la hauteur du caractère x dans la fonte courante. Cette unité est utile pour le calcul de la taille des « petites majuscules » :

Le mot «  NORMAL  » est en petites majuscules et ces majuscules sont de la hauteur du caractère « x ».

La hauteur du caractère x précise la ligne haute des minuscules basses dans les alphabets latins.

Pixel

Le pixel est une unité souvent confondue avec les dots (ou points typographiques). La définition du pixel est dépendante du moyen de restitution physique et permet de conserver un rapport fixe entre la définition locale du pixel et la densité du périphérique de restitution.

Ainsi, un trait apparemment formé de 40 pixels sur un écran et sur une photocomposeuse est par exemple constitué de 40 points sur l’écran mais de 800 points sur la photocomposeuse.

Pourcentages

Un pourcentage est un nombre entier ou réel, positif ou négatif, immédiatement suivi du signe pourcentage % . Chaque définition de propriété CSS, dont la valeur peut être un pourcentage, précise par rapport à quelle valeur de propriété ce pourcentage est défini.

Ainsi, pour indiquer que la largeur d’un paragraphe P , fils d’une division DIV portant la classe c12 , est égale à 80 % de la largeur de l’élément DIV  parent, on écrit :

DIV.c12 > P { width : 80% }

URL, URN et URI

Les URL (Uniform Resource Locators) donnent l’adresse d’un objet sur le Web. Les URL sont censés à terme céder la place à des noms uniques, les URN (Uniform Resource Name).

Cette confusion entre adressage et nommage est courant et problématique. Si l’être humain ne cherchait pas à donner du sens à tout ce qu’il rencontre, il appréhenderait peut-être les URL correctement. Plus de ruée sur les domaines en .com, pas de dénigrement des domaines nationaux, facilité de constitution d’annuaires de serveurs/services, etc. Ah, le doux rêve !

Les URL et les URN constituent les URI (Uniform Resource Identifiers). Par souci de simplicité, la spécification CSS2 parle uniquement d’URI. Sachez que pour l’instant les seuls URI manipulables sont les URL. Il s’avère par ailleurs que la description d’un URI fait intervenir la notation fonctionnelle url()  !

Un URI est précédé de url( et suivi de ) . Vous pouvez insérer des espaces après la parenthèse ouvrante ou avant la parenthèse fermante. Vous êtes par ailleurs libre d’encadrer l’URI d’apostrophes ou de guillemets, comme une chaîne de caractères :

TABLE { background : url( "http://www.edf.fr/bckgrnds/bck1.gif" ) }

Application des CSS à HTML

Styles portés par un élément

La version 4.0 de HTML associe à presque tous les éléments du modèle documentaire l’attribut STYLE dont la valeur contient des styles associés à l’élément qui les porte.

<!ENTITY % StyleSheet "CDATA"  -- style sheet data -->

<!ENTITY % coreattrs
 ...
 style        %StyleSheet;   #IMPLIED
 ....

Seuls les éléments HTML , HEAD , les éléments contenus dans HEAD , et enfin PARAM ne peuvent porter l’attribut STYLE .

Le langage des styles contenus dans l’attribut STYLE porté par un élément n’est pas nécessairement CSS. Il est possible de déclarer un autre langage de description de styles en insérant dans HEAD un élément META spécifique, par exemple :

<META HTTP-EQUIV="Content­Style­Type" CONTENT="text/x­p­language">

L’attribut HTTP-EQUIV doit alors contenir "Content­Style­Type" et l’attribut CONTENT le type MIME associé au langage de description de styles à utiliser.

Dans le cas où aucun élément META de ce type n’est présent dans le document et si l’en-tête de la réponse HTTP ayant fourni le document en question ne contient pas de champ Content-Style-Type: xxxxx  , le logiciel de navigation doit considérer que le langage utilisé est CSS.

Dans le cas des CSS, l’attribut STYLE contient des déclarations CSS séparées par des points­virgules. Par exemple :

<P STYLE="text-align : center ; color : red">Bonjour
   &agrave ; tous</P>

indique que les caractères du paragraphe en question devront être restitués en rouge et que le paragraphe sera centré.

Feuilles de styles intégrées au document

Pour éviter d’associer des styles à chaque élément d’un long document et de répéter des styles identiques sur tout un document, il est possible d’attacher une feuille de styles CSS complète à l’intérieur du document. Cela est réalisé par l’intermédiaire de l’élément HTML STYLE contenu dans HEAD  :

<!ENTITY % StyleSheet "CDATA" >
<!ENTITY % MediaDesc  "CDATA"  >
<!ENTITY % Text       "CDATA" >

<!ELEMENT STYLE - - %StyleSheet >
<!ATTLIST STYLE
 %i18n
 type   %ContentType;  #REQUIRED
 media  %MediaDesc;    #IMPLIED
 title  %Text;         #IMPLIED
 >

L’attribut TYPE porté par STYLE est identique à l’attribut CONTENT porté par META dans le cas de la déclaration d’un langage de description de styles et sa valeur contient le type MIME du langage en question. Dans le cas des CSS, on aura TYPE= " text/css ". L’absence de cet attribut sélectionne par défaut les CSS.

L’attribut MEDIA indique, quant à lui, le medium auquel s’applique les styles définis dans l’élément. Si ces styles s’appliquent à plusieurs media, la valeur de cet attribut contient alors la liste des media séparés par des virgules. Par exemple :

<STYLE TYPE="text/css" MEDIA="print,screen,tv">
....
</STYLE>

Les styles eux-mêmes sont définis dans le contenu textuel de l’élément STYLE . Par exemple :

<STYLE TYPE="text/css">
  H1 { text-transform : uppercase }
  P.abstract { text-align : center ; color : red }
</STYLE>

Il peut y avoir plusieurs éléments STYLE par document HTML. Le logiciel de restitution devra alors lister toutes les règles se référant au medium qu’il utilise et appliquer ensuite l’algorithme de cascade pour déterminer réellement quelles règles s’appliquent.

Comme certains logiciels de navigation obéissent à la bonne vieille règle « j’affiche comme du texte simple tout ce que je ne comprends pas », sans faire de distinction entre les éléments contenus dans HEAD (en général non restitués) et ceux de BODY (restitués), quelques usagers récalcitrants aux outils modernes pourraient avoir la désagréable surprise de voir apparaître tout le contenu des éléments STYLE en haut des documents consultés ! Pour éviter cela, l’auteur du document et de ses styles prendra alors soin d’encapsuler ce contenu dans un commentaire SGML, ignoré par les CSS :

<STYLE TYPE="text/css">
<!--
  H1 { text-transform : uppercase }
  P.abstract { text-align : center ; color : red }
-->
</STYLE>

Un commentaire SGML commence par la séquence (inférieur à, point d’exclamation, tiret, tiret) et se termine par la séquence (tiret, tiret, supérieur à).

Attention à ne pas confondre commentaire SGML et commentaire CSS... Un commentaire SGML n’a aucun incidence sur l’analyse des règles CSS tandis qu’un commentaire CSS est analysé et doit être ignoré... Un commentaire SGML ne sert qu’à cacher les styles aux navigateurs les plus anciens.

Référence à une feuille de styles externe

Mais l’intérêt principal des CSS est leur intégration parfaite dans le monde du World Wide Web. En effet, les feuilles de styles peuvent être des objets indépendants disponibles sur le réseau auxquels se réfèrent des documents HTML qui vont appliquer les styles définis dans la feuille de styles en question.

On peut ainsi facilement rédiger une feuille de styles pour tout un ensemble de documents, voire le serveur institutionnel d’une entreprise, puis appliquer cette feuille de styles à tous les documents. Toute modification des styles dans la feuille de styles sera alors instantanément répercutée sur la restitution de l’ensemble des documents du serveur.

Pour ce faire, il faut utiliser un élément LINK inséré dans l’en-tête HEAD du document :

<!ELEMENT LINK - o EMPTY >
<!ATTLIST LINK
  %attrs;
  charset      %Charset;         #IMPLIED
  href         %URI;             #IMPLIED
  hreflang     %LanguageCode;    #IMPLIED
  type         %ContentType;     #IMPLIED
  rel          %LinkTypes;       #IMPLIED
  rev          %LinkTypes;       #IMPLIED
  media        %MediaDesc;       #IMPLIED
  >

L’attribut HREF contient l’URL de la feuille de styles en question tandis que TYPE et MEDIA précisent, exactement comme dans le cas de l’élément STYLE , à quels media elle s’applique.

Le fonctionnement des attributs REL et TITLE est plus subtil et permet de définir des choix de feuilles de styles, des préférences et des styles obligatoires :

Considérons l’exemple suivant :

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

<LINK REL="stylesheet" TYPE="text/css" HREF="best.css"
     TITLE="Mon site a moi !">
<LINK REL="alternate stylesheet" TYPE="text/css" MEDIA="print"
     HREF="paginated.css" TITLE="Mon site a moi !">
<LINK REL="alternate stylesheet" TYPE="text/css" MEDIA="aural"
     HREF="aural.css" TITLE="Mon site a moi !">

<LINK REL="alternate stylesheet" TYPE="text/css"
     HREF="tty.css" TITLE="Comme sur un TTY">
<LINK REL="alternate stylesheet" TYPE="text/css" MEDIA="aural"
      HREF="aural-clean.css" TITLE="Comme sur un TTY">

Il contient six références à une feuille de styles externe définissant une feuille de styles persistante , et deux séries d’alternatives dont l’une est préférée . D’après la section 14.3.2 de la spécification HTML 4.0, un navigateur découvrant cette séquence de déclarations doit agir comme suit :

1. Si l’usager a demandé d’ignorer les styles définis par l’auteur pour n’appliquer que des styles voulus par lui, ignorer toutes les déclarations.

2. Sinon :

• proposer à l’usager un choix de styles alternatifs, basé sur les valeurs des attributs TITLE , l’un de ces choix étant préféré. Par exemple :

• si l’usager ne choisit pas, utiliser la feuille de styles préférée ,

• utiliser toutes les alternatives de même nom (contenues dans TITLE ) que la feuille à utiliser,

• utiliser également les feuilles de styles persistantes déclarées.

Le choix de feuille de styles, qui à la date de rédaction du présent document n’est implémenté par aucun navigateur, constitue pourtant l’un des critères obligatoires de conformité à CSS défini dans la spécification... Heureusement que les éditeurs de logiciels ont participé à la standardisation des CSS !

Si le document contient plusieurs définitions de feuille de styles préférée, seule la première est prise en compte.

La sélection de la feuille de styles préférée peut être réalisée de deux autres façons :

1. par l’intermédiaire d’un champ spécifique HTTP :

   Default-Style : " xxxxxx "

   où xxxxxx est le nom de la feuille de styles, contenu dans l’attribut TITLE .

2. par l’usage d’un élément META  :

   <META HTTP-EQUIV="Default-Style" content=xxxxxx">

   où xxxxxx est toujours le nom de la feuille de styles en question.

Ce type de définition de la feuille de styles préférée prévaut toujours sur une définition via un élément LINK . En cas de multiple définition par HTTP ou META , c’est ici la dernière qui est conservée.

Usage de HTTP

Pour appliquer une feuille de styles à un large ensemble de documents HTML existants, ces documents ne contenant pas d’élément LINK pouvant pointer vers la feuille de styles en question, on peut aussi demander au serveur HTTP d’émettre tous les documents en incluant un champ Link dont la valeur est un URL pointant vers la feuille de styles. Par exemple :

Link: <http://monsite.fr/css/styles.css>; rel="stylesheet"

Un serveur HTTP comme Apache permet ce type d’insertion à la volée. Si votre serveur HTTP ne le permet pas, jetez-le donc et courez tout de suite récupérer le meilleur logiciel serveur HTTP du monde en http://www.apache.org /. Utilisé par 48 % de la base mondiale Web installée, il a été salué en mai 1998 par le Gartner Group comme un produit gratuit, stable, efficace et sur lequel les entreprises peuvent s’appuyer sans inquiétude. Disponible pour tous les Unix et Windows NT avec la même qualité !

Pour les incrédules, ce chiffre de 48 % est issu du rapport du Gartner Group lui-même... Il dénote une faible diminution par rapport à début 1997 puisqu’à cette date, 52 % des serveurs utilisaient Apache. Une valeur très sûre, à utiliser sans modération... Un très grand nom du monde de l’informatique en trois lettres commençant par I et finissant par M vient de miser dessus et d’annoncer l’intégration d’Apache dans ses suites logicielles dédiées au commerce électronique.

Pour plus d’informations sur ce champ HTTP, vous pouvez vous reporter à la spécification HTTP/1.1, section 19.6.1.

Media de restitution

La possibilité de décliner des styles de restitution différents par media de restitution dans une seule feuille de styles constitue une des importantes nouveautés des CSS 2 par rapport aux CSS 1.

Un media de restitution est un moyen de visualisation, impression, lecture, etc. de l’information contenue dans un document sur lequel s’applique une feuille de styles CSS. Les CSS permettent de décliner des règles par media de restitution et ainsi d’affiner le rendu d’un document en fonction de chacun des media qui peuvent le restituer.

Pour bien illustrer la différence entre un media de restitution et un périphérique de restitution, prenons l’exemple simple d’un écran. Il existe plusieurs types d’écran, bien entendu : moniteur informatique VGA couleur, télévision connectée ou non à l’ordinateur, moniteur informatique de type télétexte, écran de téléphone portable, etc. Tous ces périphériques, qui sont tous des écrans , ne représentent pas les mêmes media . Les contraintes de restitution d’un document Web liées à chacun de ces périphériques ne sont pas les mêmes. Le regroupement de périphériques par contraintes de même type a donc conduit à la notion de media de restitution.

On peut, à l’aide de cette notion, par exemple construire un ensemble de règles CSS qui permettraient de visualiser correctement un document dans un browser graphique couleur, de bien imprimer l’information contenue dans le document sur une imprimante de type Télétype ou dérouleur de ruban, voire de lire le document pour un non-voyant.

Les différents media de CSS 2

La spécification CSS 2 définit dix media. Cette liste est prévue pour être extensible mais il est clairement indiqué dans le document que seuls les media définis par la spécification doivent être pris en compte par les logiciels conformes aux CSS 2.

Si vous êtes développeur, ne vous amusez pas à définir votre propre type de media sans l’avoir proposé aux éditeurs de la spécification CSS...

À chaque media est attribué un identificateur dont le nom peut être écrit indifféremment en minuscules ou en majuscules. En voici le tableau récapitulatif :

La règle-at @media

La règle-at @media permet, dans une feuille de styles CSS, d’attacher à un ou plusieurs media un ensemble de règles CSS. Le nom de la règle @media est alors suivi de la liste des media associés, séparés par une virgule, liste elle-même suivie d’un bloc contenant les règles CSS associées aux media en question. Par exemple, les règles :

@media screen {
       BODY { background-color : rgb(80%, 80%, 80%) }
}
@media print, projection {
       BODY { background-color : white }
}

auront pour effet de visualiser le document sur lequel elles seront appliquées avec un fond gris clair sur un écran d’ordinateur mais de l’imprimer et de le projeter sur fond blanc.

Cas de HTML

Il est possible en HTML, lorsque l’on attache une feuille de styles CSS à un document par l’usage d’un élément LINK , de spécifier pour quels media les styles doivent être utilisés. On utilisera pour cela l’attribut HTML MEDIA porté par l’élément LINK . Par exemple :

....
<HEAD>

  <TITLE>Transparents de la journée "Club des usagers"
         du 12 mars</TITLE>
  <LINK REL="STYLESHEET" HREF="/styles/slides.css" TYPE="text/css"
       MEDIA="projection,print">
</HEAD>
<BODY>
....