Les feuilles de style en cascade

(Ph. Truillet – UPS)

27 Septembre 2001 – v. 1.0

1. Introduction

De plus en plus de documents sont présents sur Internet et l’aspect visuel des pages est devenu un enjeu vital afin de captiver les utilisateurs. Le langage HTML offre, depuis ses premières versions un grand nombre de balises (tags) permettant un rendu graphique globalement satisfaisant.

Cependant, un problème (de taille) subsiste : comment modifier rapidement le rendu graphique d’un site web sans avoir à traiter une par une les pages du site ?

Au moins une solution existe : elle passe par les CSS.

CSS, quez aco ? C’est l’acronyme de Cascading Style Sheet, soit en français : feuilles de style en cascade (FSC mais, ça le fait moins J)

Le concept repose sur la séparation de la structure sémantique de la page web (portée par les balises de titre (h1, h2, etc.) et la présentation visuelle de cette page.

2. Fonctionnement

2.1. Généralités

Chaque règle est constituée de deux parties :

v un sélecteur qui spécifie les éléments du document auxquels la règle s’applique

v et une déclaration qui spécifie les valeurs des propriétés

Il est à noter que la déclaration peut comporter plusieurs spécifications de valeurs de propriétés. Dans ce cas, les spécifications sont séparées par un point-virgule.

Il existe trois niveaux sur lesquels on peut définir des caractéristiques liées aux CSS. On peut définir un style :

v pour une balise HTML,

v pour une page HTML

v et pour un groupe de pages (voir un site entier)

2.2. CSS appliquée à une balise

Pour définir des attributs de style pour une balise HTML, c’est simple !

En effet, il suffit d’ajouter un paramètre “style” qui va contenir une chaîne de caractères. Cette chaîne va contenir un ensemble d’attributs séparés par des points-virgules. L’exemple 1 illustre un tel cas en mettant un paragraphe (balise <p>) dans un style particulier.

<html>

<head><title>Exemple 1</title></head>

<body>

<p> style du paragraphe "normal"</p>

<p style="color:#808000;font-style:italic;text-align:center"> style du paragraphe avec CSS</p>

</body>

</html>

Exemple 1 : CSS appliquée à une balise

2.3. CSS appliquée à une page web

La seconde possibilité consiste à définir des aspects liés pour les balises d’un document HTML. Pour ce faire, on utilise le couple de balises <style></style> inclus dans le fichier HTML.

Dans ce bloc de données (cf. exemple 2), on y place pour un certain nombre de sélecteurs des définitions de style. Le terme de sélecteur est utilisé soit :

v pour identifier une balise HTML (<p>, <h1>, etc.)

v soit pour identifier un type de classe d’une balise

<html>

<head><title>Exemple 2</title>

<style>

<!--

P {

color:#00A0FF;

font-size: 10pt;

font-family: arial;

}

P.special

{

color:#FF00FF;

text-align=center;

}

//-->

</style>

</head>

<body>

<p> nouveau style du paragraphe</p>

<p class="special"> autre style de paragraphe défini</p>

</body>

</html>

Exemple 2 : CSS appliquée à une page HTML

En observant l’exemple 2, on s’aperçoit rapidement que le style de paragraphe <p> a été redéfini de deux façons. Le style a tout d’abord été redéfini “de manière classique” et aussi pour une entité nommée “special” qui est une classe de style.

Un paragraphe dans cet exemple est défini par une couleur bleu pâle, avec une fonte de type Arial de taille 10 points. Une paragraphe “spécial” redéfini la couleur et aligne le texte au centre.

2.4. CSS appliquée à un ensemble de pages web

Il nous reste à présenter la dernière possibilité : appliquer une feuille de style à un ensemble de pages web !

C’est la solution la plus intéressante. En effet, cette solution passe par la définition d’un fichier indépendant (extension .css) applicable à un ensemble de pages.

Ainsi, il est possible, en modifiant seulement ce fichier css de redéfinir le design complet d’un site web ! Pour arriver à ce résultat, deux choses (seulement) sont à faire :

v créer le fichier de définition des styles

v et lier ce fichier aux documents HTML concernés au moyen de la balise link

En résumé, l’utilisation de feuilles externes est fortement recommandée pour diverses raisons :

v pour le partage de feuilles entre utilisateurs,

v pour un changement de présentation sans altérer le contenu du document

v et pour une utilisation sélective de feuille de style en fonction des médias, des préférences de l’utilisateur, etc.

mon_style.css

body

{

background: #0f0f0f

font-family: Arial;

font-size: 10pt;

}

{

color: #008000;

font-family: Arial;

font-size: 12pt;

}

{

color:#00A0ff;

font-size: 10pt;

font-family: arial;

}

.special

{color:#ff00ff;

text-align=center;

}

exemple3.html

<html>

<head><title>Exemple 3</title>

</head>

<body>

<p> nouveau style du paragraphe</p>

<p class="special"> autre style de paragraphe défini</p>

</body>

</html>

Exemple 3 : CSS appliquée à un ensemble de pages web

2.5. L’héritage

2.5.1. Les sélecteurs

Les sélecteurs permettent d’identifier les éléments de l’arbre du document auxquels s’applique une règle de présentation comme montré dans l’exemple 4.

Exemple 4 : exemple de structure d’un document HTML

Les sélecteurs permettent de désigner :

v un élément spécifique,

v l’ensemble des éléments dans l’arbre du document,

v des éléments appartenant à des classes,

v etc.

Si plusieurs sélecteurs désignent des éléments qui partagent les mêmes caractéristiques de représentation, ils peuvent être regroupés.

Certaines valeurs de propriétés liées à des éléments peuvent être héritées de l’élément parent.

2.5.2 La cascade

Le style de document peut être spécifié par :

v l’auteur (dans le document HTML ou via une référence à une feuille de style)

v le lecteur (par la modification des paramètres du navigateur)

v et l’application (présentation par défaut du navigateur)

Les spécifications de l’auteur sont prioritaires à celle de l’utilisateur qui sont elles-même prioritaires par rapport à la présentation par défaut.

3. Les principales règles de style

3.1. Spécification des fontes

v font-family :pour spécifier le nom de la fonte ou un nom générique (serif, sans-serif, monospace, cursive ou fantasy)

v font-style : pour préciser le style (italic, etc.)

v font-variant : avec comme valeur small-caps (petites capitales)

v font-weight : pour préciser la graisse (bold, bolder, lighter ou une valeur numérique comprise en 100 et 900)

v font style : pour préciser la taille des caractères (xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller ou une valeur typographique absolue)

3.2. Apparence du texte

v text-decoration : underline, overline, line-through ou blink

v text-transform : capitalize, uppercase ou lowercase

3.3. Présentation des paragraphes

v text-align : left, right, center ou justify

v text-indent : pour contrôler l’indentation de la première ligne d’un paragraphe

v lign-height : pour le contrôle de l’espacement entre les lignes (en valeur absolue ou en pourcentage par rapport à la taille de la fonte)

v word-spacing, letter-spacing : pour le contrôle de l’espacement horizontal entre les caractères

3.4. Couleurs

v color : couleur du texte

v background-color : couleur de fond

v background : pour un fond texture ou coloré

De très nombreux autres attributs existent (bordures et marges des tableaux, etc.) et peuvent être appliqués notamment pour d’autres présentations que la présentation visuelle (synthèse de parole, barrettes brailles, etc.). Une liste exhaustives des attributs est disponible sur le site du W3C (World Wide Web Consortium) à l’adresse : http://w3c.org.

4. Exercice

v créez tout d’abord une page HTML contenant votre CV

v créez deux feuilles de style :

o une pour une présentation “classique”

o une pour une présentation moderne (couleurs, différentes polices de caractères)

Vous pouvez échanger vos feuilles de style ; le seul mot d’ordre est : L’imagination au pouvoir !