Les feuilles de style en cascade (CSS)

1. Introduction

Dès 1996 est apparu un nouveau langage, élaboré par le W3C, appelé CSS (Cascading Style Sheets), dont le but est de spécifier les styles en HTML : celui-ci fut adopté par les principaux navigateurs.

Fondamentalement, le CSS sépare réellement le contenu et la structure de la présentation d'un document HTML : il respecte donc la DTD (Document Type Definition : la DTD définit l'ensemble des éléments supportés avec leurs attributs et indique si un élément peut en contenir d'autres).

Le HTML est une application SGML (Standard Generalized Markup Language). Le principe du SGML (donc du HTML) est de séparer le contenu d'un document et sa présentation.

Cette séparation était impossible avant la venue du CSS, quand des balises étaient incorporées au code HTML, afin d'indiquer le style du contenu. Ces balises ne respectaient pas les principes de structuration des documents puisqu'elles mêlaient présentation et contenu !

Par exemple, l'élément <STRONG> dont le rôle fondamental est d'indiquer l'importance d'une partie du texte, peut être présenté en caractère gras, par une feuille de style :

STRONG {font-weight:bold}

De cette manière, peu importe le style de présentation utilisé pour le texte entouré des balises <STRONG>, celui-ci pouvant être changé à tout moment (script ou feuille de style), mais structurellement, cette partie de texte reste définie comme importante pour le document !

Quand était mêlé style et structure dans les codes HTML, il était difficile de les séparer ultérieurement, ce qui rendait fastidieux la gestion des documents HTML !

Un autre exemple est l'emploi des codes d'en-têtes (H1....H7). Beaucoup d'auteurs employaient ces balises comme simple moyen de mettre en "gros caractères" le texte inséré entre celles-ci et ainsi, un élément H1 pouvait être suivi d'un élément H3 (sans H2), ce qui n'a aucun sens au point de vue structurel ! (Imaginez un texte où apparaîtrait un titre "I.Introduction", suivi d'un autre "III. Application" où le titre "II. ....." n'existerait pas ?)
Les balises d'en-tête, dans ce cas, ne définissent pas une structure (DTD) mais servent uniquement comme outil de définition de style ! Idem pour les balises B ou I qui avaient été créées pour raison de facilité mais dont l'emploi ne respectent pas la DTD.

Ces pratiques ne sont pas sans conséquences, en effet, en premier lieu il y a une perte de la puissance réelle des outils (balises) mais également, en second lieu, une mauvaise accessibilité aux informations sous-jacentes (comme un texte écrit au "km", sans ponctuation correcte ! Celui-ci devient inintelligible...)

Enfin, le CSS est primordial pour l'élaboration des styles dynamiques (style qui peut être modifié par un script) dans les documents HTML.

2. Techniques

Il existe trois techniques différentes pour joindre des feuilles de style à un document HTML, respectivement plus complexes mais offrant également des possibilités plus vastes.

Les styles en ligne (le style est défini directement dans l'élément concerné), les feuilles de style globales (le style du document est élaboré et défini dès son début) et enfin, les feuilles de style liées (le style du ou des documents est défini dans un fichier séparé). Cette dernière technique est la plus puissante, car elle offre les plus grandes possibilités, notamment au point de vue de la gestion des pages Web, puisqu'un seul fichier peut gérer tous les styles de plusieurs pages voire, d'un site Web entier !

On parle de cascade (cascading) car un style unique (pour un élément ou un document entier) peut être élaboré par la combinaison de plusieurs feuilles de style...

a) Style en ligne (intra-ligne)

Le style en ligne est une sorte de feuille de style unique, élaborée pour l'élément concerné. Celui-ci est spécifié directement dans la balise du début de l'élément, par les attributs de STYLE, qui emploient d'ailleurs le même langage que celui des feuilles de style (globales ou liées).

b) Feuilles de style globales

Ici, la définition de la feuille de style globale s'insère par la balise spécifique <STYLE>, généralement placée dans l'en-tête du document.

En quelque sorte, on regroupe les différents styles concernant les différents éléments, ce qui permet de définir globalement le style de tout le document HTML.

Cette technique permet, par le changement de quelques codes, de modifier toute la présentation de la page ou de lui adjoindre un ou des styles supplémentaires.

Exemple : une feuille de style globale qui définit un fond d'écran, la justification des paragraphes, une classe "info" (fond marron et couleur blanche) et enfin, les éléments <STRONG> en couleur rouge. (vous pouvez visionner la page ci-dessous)

<HEAD>
    < STYLE TYPE="text/css">
                BODY {background-image:URL(image.gif)}
                P {text-align:justify}
                .info {background:maroon;color:white}
                STRONG {color:red}
    </STYLE>
</HEAD

Si vous avez choisi une feuille de style globale (ou liée) qui définit la justification de tous les paragraphes, il adviendra certainement que dans certains cas ce soit inopportun ! Dans ce cas, créez une classe spéciale (P.n {text-align:left}) qui alignera le paragraphe de cette classe à gauche.

c) Feuilles de style liées

Même syntaxe pour la définition des styles que celle des feuilles de style globales, mais cette définition se trouve dans un fichier distinct du ou des documents HTML.

Ce fichier, d'extension CSS (".css") permet de grouper les styles et les règles communes de plusieurs pages, voire d'un site Web entier.

Cette dernière technique apporte une amélioration des performances, car :

• la feuille de style liée est mise en mémoire séparément;
• les documents sont moins volumineux;
• le chargement des informations de style ne se fait qu'une seule fois

Vous pouvez également lier un fichier séparé qui comprend le ou les scripts nécessaires au document HTML. La syntaxe est la suivante :

Le fichier externe ne peut contenir aucun code HTML mais uniquement les règles contextuelles et les définitions de styles...

3. La pratique des feuilles de style...

Comme je vous l'ai dit précédemment, la syntaxe d'une feuille de style liée est la même que celle d'une feuille de style globale et les attributs de style sont identiques aux trois techniques.

Le langage CSS est formé de sélecteurs et de règles de présentation. Les éléments qui sont associés à une règle particulière sont définis par les sélecteurs et l'apparence choisie pour ces éléments est indiquée par les règles de présentation.

Il est également possible de créer différentes feuilles de style globales dans un même document et faire en sorte (script) que suivant la résolution d'écran du visiteur, telle ou telle feuille de style globale soit employée. Malheureusement, cette technique avancée n'est pas reconnue actuellement par Netscape mais uniquement par Internet Explorer (4 et plus). Pour cette raison, je ne développerai pas ici cette possibilité mais bien dans la section réservée aux techniques acceptées ou comprises par IE. Si vous employez Internet Explorer (4 et +), je vous recommande de consulter cette section où cette technique particulière est traitée, y compris en assurant la compatibilité avec Netscape (pour que le document soit visionné correctement). 

a) Sélecteurs

Sélecteurs simples

Un sélecteur simple associe un élément (par son type ou son attribut) à une règle particulière et cela, quelle que soit la position qu'il occupe parmi les autres éléments.

On peut grouper plusieurs sélecteurs simples, à une même règle de présentation, en les séparant par des virgules (",").

H1,H2 {color:navy}
H3, H4, H5 {color:red}
H6,H7 {color:green}

Dans cet exemple, les en-têtes

H1 et H2 sont affichés en bleu,
H3,H4 et H5 sont affichés en rouge,
H6 et H7 sont affichés en vert.

Sélecteurs contextuels

Comme leur nom l'indique, les sélecteurs contextuels associent une règle particulière à un élément, mais en fonction de sa situation.

Par exemple, tous les éléments <STRONG> de classe ex (CLASS="ex") situés dans des paragraphes (P) sont affichés en jaune. Si un élément <STRONG> n'est pas inséré dans un élément P (SPAN, DIV...) ou un élément P de classe différente, la règle ne lui sera pas appliquée. On sépare par des espaces    les sélecteurs contextuels que l'on veut grouper.

P  STRONG.ex {color:yellow}

Chaque sélecteur peut faire référence à une CLASSE, un ID ou un TYPE d'élément.

DIV.rem   P    STRONG {font-style:italic;color:green;font-size:150%}

Ici, sont affichés les éléments <STRONG>, inclus dans un élément P s'il est situé dans un élément DIV de classe rem (CLASS="rem") en caractères italiques, de couleur verte, dans une police agrandie de 50%.

UL  EM.info {font-size:30px;color:yellow;background:navy}

Autre exemple : les éléments EM de classe info (CLASS="info") qui sont contenus dans une liste (UL) sont affichés dans une police de 30px, en couleur jaune sur fond bleu si celui-ci est lui-même contenu dans un élément UL.

b) Pseudo-classes

Un ensemble d'éléments qui répondent à un même critère de contexte forme ce que l'on appelle une pseudo-classe.
Ils sont spécifiés dans les feuilles de style, par l'ajout de deux points (":")

A:link {font-size:14px;color:royalblue}
A:visited {font-size:16px;font-style:italic;color:maroon}
A:active {color:red}

Parce que seules les ancres (Anchor) peuvent appartenir à active, link ou visited, on peut aussi les définir sans ajouter le A (qui spécifie les ancres) et donc, on peut écrire l'exemple précédent par :

:link {font-size:14px;color:royalblue}
:visited {font-size:16px;font-style:italic;color:maroon}
:active {color:red}

Actuellement, seules les pseudo-classes des ancres sont reconnues ! Dans la feuille de style liée (tutor.css) de ce tutoriel, on emploie les pseudo-classes présentées ci-dessus. Ainsi, lorsque vous avez cliqué sur un lien, celui-ci se met en caractères italiques...

De manière identique, CSS1 définit aussi des pseudo-éléments (pour la première ligne et pour le premier caractère) : visitez le site du W3C pour de plus amples renseignements (section pseudo-éléments).

c) L'assistant de création / modification des feuilles de style de WebExpert 2000

WebExpert vous donne la possibilité de créer vos feuilles de style très facilement, par l'intermédiaire d'un assistant très sophistiqué dans la version 2000. Un onglet spécifique y est consacré. Pour créer vos feuilles de style, choisissez l'onglet "CSS" et cliquez sur le ou les boutons qui vous intéressent :

Vous désirez que les liens (ancres internes/externes) ne comportent pas de soulignement, voyons comment procéder avec le nouvel onglet "CSS".

• Première étape, cliquez sur l'onglet "CSS" et choisissez ensuite le premier bouton

• Deuxième étape, cliquez sur le premier menu "Style" et choisissez "Nouveau

• Dans la fenêtre proposée, choisissez la propriété "text-decoration" 

• Dans la boîte de liste proposée à droite pour cette propriété ("Choisir parmi la liste...", sélectionnez "none"

• Enfin, choisissez la balise "A" dans la boîte de liste concernant les balises HTML. Une autre manière, plus directe est d'encoder directement dans le champ proposé pour le sélecteur, la lettre "A".

• Si vous le désirez, vous pouvez choisir d'autres attributs ou propriétés, en restant toujours dans le même écran. Voire même, changer ou supprimer un choix précédent...

• Cliquez sur le bouton "OK" pour insérer le code de la feuille de style globale dans le document actif. 

• Voilà, c'est terminé !

Vous avez remarqué sans doute la très grande facilité avec laquelle vous avez pu créer votre feuille de style globale. La seule difficulté qui pourrait s'avérer est celle de ne pas connaître tous les choix qui vous sont proposés, et nous vons conseillons donc de tester ceux-ci pour les découvrir...
Vous pouvez visualiser les différentes étape nécessaires en cliquant sur les boutons ci-dessous :

Code inséré par l'assistant 

<STYLE TYPE="text/css">
<!--
A {text-decoration: none}

/* Fin de la section de style généré par WebExpert le 4/04/00 16:11:04 */
-->
</STYLE>

2. Lien vers une feuille de style externe existante

Cette feuille de style peut être créée par l'assistant, en cliquant sur le bouton ,qui vous sera expliqué ci-dessous.

• Première étape, cliquez sur le bouton de l'onglet "CSS"
• Ici c'est très facile, il vous suffit de choisir, par l'assistant, la feuille de style que vous avez déjà créée et qui doit formater votre document.
• Lorsque c'est fait, il ne faut pas oublier de cliquer sur le bouton "Ajouter" car sinon, le lien ne sera pas créé. Vous pouvez également insérer plusieurs feuilles de style dans le même document.

Vous pouvez également visualiser les trois étapes nécessaires en cliquant sur les boutons ci-dessous :

Code inséré par le second assistant

<link REL="StyleSheet" TYPE="text/css" HREF="tutor.css">

3. Création d'un style "intra ligne" par l'assistant

Une feuille de style intra-ligne est souvent employé par la balise "<SPAN>" mais il est possible de le faire pour de nombreux éléments du document. Internet Explorer l'accepte pour quasiment tous les éléments du document, tandis que Netscape ne l'accepte que pour certaines balises comme <SPAN> - <DIV> - <A>. C'est la raison pour laquelle il faut très souvent créer un "pseudo-ancre" ( "pseudo-lien") comme expliqué plus avant dans ce tutoriel.

• La première étape est toujours de choisir l'onglet "CSS" et de cliquer sur le bouton de l'assistant
• Comme exemple, nous allons insérer deux attributs, à savoir la couleur rouge et une dimension de 30pt.
• L'asssistant ouvre directement une fenêtre comprenant les différentes propriétés possibles et nous allons d'abord choisir la couleur, donc la propriété "color". Ensuite, dans le champ de droite, la couleur désirée peut être choisir directement dans une fenêtre de sélection de couleur.
• La couleur choisir, ne pas refermer l'assistant car nous devons encore choisir la dimension (font-size) de 30pt. Pour cela, faites descendre l'ascenseur (scroll) pour que la propriété "font" soit visible et dans le sous-menu, choisissez "font-size" et encore "size". Dans la fenêtre d'introduction de droite, encodez la valeur numérique désirée ainsi que l'unité employée, ici "30pt".
• Fermer l'assistant lorsque vous avez terminé.

Visualisez les différentes étapes ci-dessous :

Code inséré par le troisième assistant

<SPAN STYLE="color: #FF0000; font-size: 30pt">essai</SPAN>

4. Création et/ou modification d'une feuille de style externe, par l'assistant

Nous allons prendre pour exemple la création d'une feuille de style externe. La procédure est sensiblement la même pour la modification d'une feuille de style existante.

• Première étape habituelle, choisir le quatrième assistant dans l'onglet "CSS"
• Une première fenêtre s'ouvre et vous choisissez dans le menu "Fichier", le choix "Nouvelle feuille CSS"
• Comme c'est une nouvelle feuille (nouveau fichier *.css), il faut créer des styles : pour cela, dans le menu "Style", cliquez sur "Nouveau"
• Ensuite, la fenêtre déjà connue de l'assistant des différentes propriétés vous est offerte et nous allons choisir ici une propriété particulière, à savoir "visibility" pour une classe "invis" des paragraphes. Quand vous créez certaines animations DHTML (comme les boutons de visualisation des étapes par exemple), il faut rendre invisible les éléments du document contenant les images ou textes que l'on désire rednre visible par un script. Il faut donc que ceux-ci soient invisibles normalement...
• Choisissez la propriété "visibility", à droite dans "Choisir dans la liste", prenez "hidden", pour la balise, choisissez "P" pour paragraphes mais c'est identique pour DIV - SPAN...
• Vous pouvez ajouter un commentaire pour la feuille de style
• Il est possible de fermer l'assistant ou continuer pour ajouter d'autres sélecteurs
• Quand l'assistant se ferme, il vous est demandé (ici pour une nouvelle feuille de style) de nommer le fichier, en l'occurence ici "tutor2.css".
• Pour lier les documents à cette feuille de style, employer le deuxième assistant de l'onglet "CSS"

Visualisez les différentes étapes de la création/modification de la feuille de style externe :

Code de la feuille de style externe "tutor2.css" créée par l'assistant pour cet exemple

/* Rend invisible le paragraphe... */
P {visibility: hidden}

/* Fin de la section de style généré par WebExpert le 4/04/00 17:09:48 */

Feuille de style externe