Cascading Style Sheets

Introduction

Les Cascading Style Sheets ou Feuilles de Styles en Cascade ont été initialement conçues pour le langage HTML. La première version du standard, dite CSS niveau 1 (CSS1), a été publiée en 1996.

En mai 1998, le W3 Consortium a publié une nouvelle version, dite CSS niveau 2 (CSS2). Celle-ci introduit des possibilités nouvelles par rapport à CSS-1, notamment la notion de type de média qui donne la possibilité de spécifier la mise en page d'un document en vue de son affichage sur écran, de son impression sur papier, ou d'indiquer les conditions de sa réalisation par synthèse vocale ou sur des terminaux braille.

CSS-1 et CSS-2 s'appliquent parfaitement bien à XML.

Ce nom barbare signifie simplement que les instructions de mise en page sont utilisées par ordre d'apparition, et que les surcharges sont possibles. Par exemple, si un style A définit une police Arial et une couleur bleue, on peut dans le document demander un style A avec une couleur rouge, qui remplacera temporairement le bleu dans une portion de document.

Les spécifications complètes se trouvent à l'adresse suivante http://www.w3c.org/

Implémentation

L'implémentation des feuilles de styles en cascade peut se faire de plusieurs manières :

en incluant en-tête de page HTML les styles que l'on souhaite employer dans la page en question.

en écrivant notre feuille de style dans un fichier séparé.

Cette seconde solution est celle qui a été retenue pour l'utilisation avec XML, et c'est la plus commode. Son principal avantage étant sa réutilisation pour d'autres document. Après tout pourquoi se fatiguer !

Cela s'écrit de la façon suivante :

<?xml version='1.0'?>


    <?xml-stylesheet href="FeuilleDeStyle.css" type="text/css" ?>

Concepts de base

Il est facile de concevoir des feuilles de style simples. Cependant il est nécessaire de connaître un minimum la programmation HTML/XML "à la main".
Par exemple pour définir la couleur bleue à l'élément (ou balise) H1, on écrira :

H1 { color: blue }

La règle de style

Une règle de style se compose d'un sélecteur qui indique l'élément auquel elle s'applique, et d'une ou de plusieurs propriétés ainsi que leur valeur respective. Le couple propriété: valeur forme ce que l'on appelle la déclaration.

sélecteur {propriété1: valeur ; propriété2: valeur }

Notre exemple se décompose donc ainsi :

Règle de style

Le groupage

Afin de réduire la taille d'une feuille de style et d'en accroître la lisibilité, on peut regrouper les sélecteurs en les séparant par une virgule.

H1, H2, H3 { font-family: arial }

De la même façon on peut regrouper les déclarations.

H1 { 


      font-weight: bold; 


      font-size: 12pt;


      line-height: 14pt; 


      font-family: arial; 


      font-variant: normal;


      font-style: normal;


    }

De plus, certaines propriétés peuvent avoir leur propre groupement de syntaxe. L'exemple ci-dessous est identique à celui présenté précédemment.

H1 { font: bold 12pt/14pt arial }

Héritage

Dans le premier exemple, nous avons spécifié la couleur bleue à l'élément H1. Supposons maintenant que nous avons un élément en italique à l'intérieur de celle-ci.

<H1>Le titre d'un document <EM>est</EM> très important

    !</H1>

Si aucune couleur n'a été spécifiée pour l'élément EM, le mot en italique "est" héritera automatiquement de la couleur de son élément parent (H1), soit bleue pour notre exemple. Il en va également de même pour toutes les autres propriétés à savoir font-family, font-size, etc...

Pour définir un style "par défaut" pour tout un document il suffit de définir l'élément parent à tous les autres - c'est ce qu'on appelle aussi couramment élément racine - soit en HTML, l'élément <BODY>. En XML, je vous laisse imaginer le nom de cet élément.

exemple :

BODY { 


          color : black;


          background: white;


          font-style: arial;


    }

Sélecteur de classe

Afin d'accroître le contrôle de granularité sur les éléments, un nouvel attribut a été ajouté à HTML : 'CLASS'. Tous les éléments contenus dans l'élément racine peuvent être regroupés par classe. Ces classes seront définies dans la feuille de style.

<HTML>


    <HEAD>


      <TITLE>Titre</TITLE>


      <STYLE TYPE="text/css">


        H1.citation { font-style: italic; font-weight: bold }


      </STYLE>


    </HEAD>


    <BODY>


      <H1 CLASS=citation>La vie est trop courte pour se faire la guerre</H1>


    </BODY>


    </HTML>

Dans cet exemple, nous avons "surchargé" l'élément H1 tel que défini dans la feuille de style qui est cette fois intégrée à notre document. Cependant nous aurions pu la concevoir à part.

Si nous avions voulu utiliser la classe 'citation' pour tous les éléments, on aurait écrit la feuille de style de la façon suivante :

.citation { font-style: italic; font-weight: bold }

Il existe une méthode plus élégante pour utiliser les classes sans avoir surcharger des éléments prédéfinis. Il s'agit de l'élément DIV qui a été réservé à cet effet.

... 


    <DIV CLASS=aspect1> 


    Ce texte apparaîtra avec les propriétés définies 


    dans la classe aspect1 


    </DIV> 


    ...

Commentaires

Les commentaires utilisés à l'intérieur des feuilles de style sont similaires à ceux que l'on utilise en langage C.

EM { color: red } /* rouge, vraiment rouge !! */

Conclusion

Les Cascading Style Sheets constituent donc un moyen souple et relativement simple à mettre en oeuvre pour représenter - à l'écran ou sur un autre média - un document qu'il soit conçu en HTML ou en XML.
A l'heure actuelle elles constituent les seules feuilles de style exploitables avec XML, la norme XSL n'étant pas encore achevée.

Biensûr tout ceci constitue seulement qu'une brève introduction aux feuilles de style CSS, vous trouverez les spécifications complètes à l'adresse suivante : http://www.w3c.org/