Chapitre 9 : Les Feuilles de style
Au début de l'histoire du Web, lorsque on souhaite modifier le type de caractère
d'une portion de texte, on doit utiliser la balise <font> en écrivant par exemple <font
face="Times">.
Si on souhaite définir la couleur de l'arrière plan et la bordure d'un tableau ainsi que le
retrait (padding) de chacune de ses colonnes, on doit écrire le code suivant :
<table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">
Cette approche présente cependant de nombreux inconvénients :
Les styles étant définis à l'intérieur même du contenu, ils étaient fastidieux à définir.
On doit répéter la même définition de style à chaque fois qu’on souhaite l'utiliser
dans une page où dans les diverses pages du site.
A chaque fois qu’on souhaite modifier ce style, on doit parcourir le contenu de
toutes les pages pour mettre à jour, une par une, les diverses définitions qu'elles
contenaient.
Ces répétitions augmentaient la taille des pages.
Les styles étaient figés, les contenus se présentaient de la même façon pour tous les
usages possibles : écran, imprimante, PDA, lecteurs vocaux, etc..
Les CSS représentent une nouvelle façon très efficace d'appliquer des styles aux
éléments HTML.
Elles permettent de définir n'importe quelle propriété de style comme la bordure, le type de
caractère, la couleur de fond, l'espace entre les lettres, etc.
Il y a trois façons principales d'appliquer des styles CSS :
1 Dans le corps du code HTML.
2 Dans l'en-tête de la page.
3 Dans une feuille de style totalement séparée du code HTML.
1. LES STYLES DANS LE CORPS HTML
On peut définir des styles CSS directement dans la définition d'une balise HTML.
Dans l'exemple ci-dessous, nous utilisons une balise <div> qui permet de définir une
"boîte" à l'intérieur d'un contenu :
<div style="background-color:orange; border:1px solid black; color:yellow; font-
size:150%; padding:1em;"> Cette balise div a du style ! </div>
Listing 0-1 : Style css dans le corps HTML
Ce qui donne :
Figure 0-1 : Style css dans le corps HTML
Cette approche est extrêmement proche de l'ancienne façon de définir des styles et
présente les mêmes inconvénients.
Elle ne présente un intérêt que lorsque vous êtes certain que le style défini ne sera utilisé à
aucun autre endroit ni sur aucune autre des pages.
2. LES STYLES DAND L’ENTETE DE LA PAGE
Plutôt que par la méthode précédente, il est préférable de définir vos styles CSS une
fois pour toute dans une section particulière de votre page Web (on utilise
normalement la section <head>).
<head>
<style type="text/css">
div{
background-color:#339;
color:#fff; padding:15px;
border-bottom:5px solid red;
margin-bottom:15px;
}
</style>
</head>
<body>
<div>Cette phrase est présentée en fonction du style défini dans l'en-tête </div>
<div>Cette phrase aussi, est pourtant le style n'a été défini qu'une fois !</div>
</body>
Ce qui donne :
Grâce à cette nouvelle façon de procéder, on n’a besoin de définir le style qu'une seule
fois. Dans l’exemple, le style défini s'appliquera automatiquement à toutes les balises <div>
de la page.
Avec cette méthode, on peut appliquer le même style plusieurs fois dans la même page,
mais pas à plusieurs pages d'un coup. Pour aller plus loin dans la standardisation des pages,
on doit utiliser la troisième méthode.
3. LES FEUILLES DE STYLE
La façon idéale de définir les CSS consiste à les enregistrer dans un document
indépendant des pages HTML. Grâce à cette méthode, toutes les pages qui font référence à
cette feuille de style externe hériteront de toutes ses définitions.
Un autre intérêt de cette méthode est de pouvoir définir plusieurs feuilles de styles pour le
même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le
contenu est affiché (écran, imprimante, etc.).
Une page HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans
ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles.
Voici un exemple de styles définis dans un document séparé :
Document 'mes-styles.css'
Body {
background-color:#ccf;
letter-spacing:.1em;
}
P{
font-style:italic;
font-family:times,serif;
}
Document 'ma-page.html'
<head>
<link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Voici un exemple de paragraphe.</p>
<p>Et voici un deuxième paragraphe.</p>
</body>
Et voici le résultat :
Comme dans la méthode précédente (CSS dans l'en-tête de la page), le style n'a été défini
qu'une seule fois mais peut être utilisé plusieurs fois. La différence entre cette méthode et la
précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages.
Il suffira d'ajouter la mention <link href="mes-styles.css" media="all" rel="stylesheet"
type="text/css" /> dans ces pages pour que la feuille de style s'y applique.
Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la
feuille de styles à laquelle cette page fait référence. Cette feuille de style sera gardée en
mémoire par le navigateur et n'aura pas besoin d'être rechargée lors de la lecture des pages
suivantes. Le résultat est un gain de temps de chargement global et une économie de bande
passante pour le serveur de votre site.
La méthode "<link href=..." permet également de mettre en place plusieurs feuilles de
styles destinées aux différents medias (imprimante, navigateurs de PDA, etc.).
Il y a de multiples avantages à séparer les feuilles de styles du contenu :
La réduction de la taille des pages : Les définitions de style ne sont faites
qu'une seule fois, même si elles sont utilisées plusieurs fois.
La réduction des temps de connexion : Les navigateurs garderont en mémoire (en
cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site.
Seuls les contenus des pages devront être chargés au cours de la navigation ;
Une mise à jour plus facile : on n’a besoin que de changer la feuille de style
pour
mettre à jour la présentation de l'ensemble de votre site ;
Scinder le travail de rédaction et le travail de présentation : on peut commencer
à
rédiger le contenu des pages sans se soucier de leur présentation finale. On pense simplement
à placer correctement les balises sémantiques (titre, sous-titres, listes, classes et ID, etc.). On
peut travailler la mise en page et le design plus tard.
4. LES ELEMENTS CLASS ET ID
Les styles définis dans les classes remplaceront les styles "normaux" des éléments
auxquels ils s'appliquent.
Pour créer une classe, on doit simplement faire figurer son nom précédé d'un point. Pour
éviter toute ambiguïté, le nom de classe ne doit pas comporter d'espace.
Cette définition de style est à placer dans une feuille de styles ou dans la section <head>
de la page.
.mon-style
{
color:red;
}
Pour appliquer le style défini dans une classe à un élément, on ajoute la mention
class="nom-du style" dans la définition de la balise :
<p class="mon-style">Le style s'applique à ce paragraphe</p>
<p>Mais pas à celui-là</p>
Cette façon de procéder est très pratique car elle permet d'appliquer les réglages de la
classe à de nombreux éléments, même s'ils ne sont pas du même type :
<p class="mon-style">Le style peut s'appliquer à ce paragraphe</p>
<div class="mon-style">Et aussi à cette balise !</div>
Les éléments HTML peuvent se voir attribuer un id (identification) en plus ou à la place
d'une classe.
Le principe de l'id est très similaire à celui de la classe à une exception près :
Plusieurs éléments peuvent avoir la même classe.
Il ne doit y avoir qu'un seul élément ayant un id donné.
On peut parfaitement se contenter d'utiliser les classes pour tous les styles et
oublier complètement l'existence des id.
Leur utilisation permet simplement de clarifier les choses et de mieux
structurer les pages :
On utilise les classes pour définir l'aspect des mots, phrases et paragraphes ;
On utilise les id pour placer des blocs dans la page (sachant qu'on n'a
généralement
jamais deux blocs placés exactement au même endroit).
Pour créer un id, on doit simplement faire précéder son nom d'un dièse #. Pour éviter
toute ambiguïté, le nom d'id ne doit pas comporter d'espace.
Cette définition de style est à placer dans une feuille de styles ou dans la section <head>
de votre page.
#mon-style
{
color:red;
}
Pour appliquer le style défini dans l’id à un élément, ajouter la mention id="nom-du
style" dans la définition de la balise
<p id="mon-style">Le style s'applique à ce paragraphe</p>
<p>Mais pas à celui-là</p>
5. LES BALISES BLOC ET EN-LIGNE
En CSS, il existe deux grandes familles d'éléments : les éléments de type "bloc", et les
éléments de style "en-ligne". Les éléments de type "bloc" (DIV, UL, FORM,
BLOCKQUOTE, PRE, ...), servent à la mise en page générale de la page en créant de
grands rectangles 'conteneurs'. Ils peuvent contenir soit d'autres éléments de type "bloc", soit
des éléments de type "en-ligne". Les éléments de type "en-ligne" (A, B, FONT, IMG,
INPUT, U, SPAN, ...) sont juste des conteneurs plus petits que bloc, avec un comportement
spécifique. IMG et INPUT sont des éléments vides d'après la DTD.
D'une manière générale, évitez d'utiliser les balises HTML pour la mise en forme du
contenu, dans l'idée de séparer au maximum le fond de la forme (le tag U en HTML peut
être avantageusement remplacé par text-decoration:underline; en CSS).
De plus, ces balises ont des marges externes (margin) et internes (padding) définies
par défaut à 0 et non re-définissables.
Par défaut, les éléments de type "bloc" vont prendre toute la largeur de la page.
Les éléments de type "bloc" vont s'afficher les uns en dessous des autres, alors que des
éléments de type "en-ligne" vont s'afficher les uns à la suite des autres.
Exemple :
CSS commun aux deux type d'affichage
#element1 {
background-color:#00CCFF; /* bleu ciel */
}
#element2 {
background-color:#FF6666; /* rouge */
}
#element3 {
background-color:#6699FF; /* mauve */
}
Affichage de type 'bloc' : HTML
<div id="element1">riri</div>
<div id="element2">fifi</div>
<div id="element3">loulou</div>
Affichage de type 'en-ligne' : HTML
<span id="element1">pim</span>
<span id="element2">pam</span>
<span id="element3">poum</span>
6. LE POSITIONNEMENT
La propriété CSS position permet de modifier le comportement d'affichage des blocs :
position:inherit (CSS2) déclare que l'élément en question hérite de la propriété position
de son parent. Si la position du parent est de type absolue, l'élément concerné le sera aussi...
position:fixed pourrait être une propriété intéressante. L'idée est de placer un élément
sur la page, et qu'il y reste quel que soit le défilement.
position:relative ne retire pas l'élément du flux, mais le déplace simplement par rapport
à sa position dans le flux. Petit exemple pour mieux comprendre :
Positionnement relatif : CSS
.normal {
background-color:#0099FF; /* bleu ciel */
}
.posrelative {
position:relative;
background-color:#FF9933; /* orange */
bottom:5px;
left:10px;
}
Positionnement relatif : HTML
<div class="normal">Bonjour les <span class="posrelative">petits</span> enfants.</div>
<div class="normal">comment</div>
<div class="posrelative">ça</div>
<div class="normal">va ?</div>
Exemple de positionnement relatif
On remarque ici que le troisième div (le orange) est décalé de 10 pixels vers la droite
et de 5 vers le haut par rapport à la position qu'il devrait occuper normalement. Idem pour le
span orange, décalé de la même chose par rapport à sa position théorique.
position:absolute retire complètement l'élément concerné du flux, et le place aux
coordonnées définies par les propriétés bottom, left, right ou top.
Dans l'exemple, on va dimensionner le DIV pour mieux se rendre compte de
l'effet produit :
Positionnement absolu : CSS
#element1 {
position:absolute;
background-color:#00CCFF; /* bleu ciel */
width:50px;
height:50px
; text-
align:cent
er; top:
55px
;
right
:42p
x;
}
Positionnement abs olu : HTML
<div id="element1">ploum ploum</div>
Exemple de positionnement absolu
Attention cependant... La position n'est absolue que par rapport au conteneur...
Dans l'exemple précédent, le conteneur était le BODY, donc la fenêtre du navigateur.
