L'utilisation de feuilles de styles permet de séparer la forme du fond présente de nombreux avantages. En particulier la conception et la maintenance des sites sont simplifiés. De plus leur utilisation permet d'améliorer l'accessibilité des sites de façon sensible, sans altérer du tout la qualité visuelle des documents, bien au contraire.
Voici un exemple de règle CSS permettant d'afficher les entêtes principaux (H1) en bleu :
H1 { color : blue }
Une règle CSS est composée de 2 parties : un sélecteur (ici
H1) et une déclaration (color:blue). Une
déclaration à elle-même deux parties : une propriété
(color) et une valeur (blue).
Les sélecteurs sont les éléments HTML, on peut donc indiquer pour chaque élément un ensemble de déclarations (lorsqu'il y en a plusieurs, on les sépare avec des points virgules). De même si des déclarations s'appliquent à plusieurs sélecteurs, on peut les regroupoer. Dans l'exemple suivant, on affiche les entêtes et paragraphes en rouge et on place une marge gauche de 1cm dans tous les paragraphes, que l'on affiche en italique.
H1, P { color : red }
P { margin-left : 1cm ;
text-style : italic
}
Lieu magique, rencontre du fleuve et de la mer, un environnement unique, l'estuaire de Seine est aussi un lieu de communication où sont réunis tous les modes de transport humains.
Il y a deux méthodes principales pour placer une feuille de style. La première consiste à placer la feuille de style dans l'entête de document. La seconde consiste à placer la feuille de style dans un fichier séparé, et à y faire référence dans l'entête du document. Cette dernière technique permet de réutiliser la même feuille de style dans plusieurs documents.
<HEAD>
<TITLE>...</TITLE>
<STYLE type="text/css"><!--
H1 { color : blue }
--></STYLE>
</HEAD>
Les caratères <!-- et --> servent à
commenter la feuille de style pour les navigateurs qui ne les
reconnaissent pas. Dans ce cas, les déclarations de styles
risqueraient de perturber l'interprétation de la page.
<HEAD> <TITLE>...</TITLE> <LINK rel=STYLESHEET href="styles.css" type="text/css"> </HEAD>où
styles.css est le nom du fichier contenant les styles.
normal, italic, oblique
normal, bold, bolder,
lighter, 100, 200,
300,... 900.
xx-small, x-small, small,
medium, large, x-large,
xx-large, larger, smaller.left, right, center, justify
none, underline, overline, line-through, blink (Ces valeurs peuvent être combinées)
capitalize, uppercase, lowercase, none
1em : hauteur d'un caractère dans la police courante 1ex : hauteur du x dans la police courante 1px : 1 pixel 1in : 1 inch 1cm : 1 centimètre 1mm : 1 millimètre 1pt : 1 point = 1/72 inch 1pc : 1 pica = 12pt
none,
hidden, dotted, dashed,
solid, double, groove,
ridge, inset, outset
thin, medium, thick ou bien une longueur.
left, center, right
Parfois, il est nécessaire de pouvoir choisir entre plusieurs types de présentations pour un même élément HTML. C'est souvent le cas pour les paragraphes dans un document long. Par exemple, on peut avoir les paragraphes d'entête, des remarques et des paragraphes normaux.
L'attribut class, qui peut être appliqué à tous les
éléments HTML, permet de préciser des classes d'éléments. on peut
alors préciser les styles qui doivent s'appliquer à chaque classe.
.rouge { color: red }
P.entete { font-style: italic }
Dans le premier cas, on indique que tous les éléments de classe
"rouge", quels qu'ils soient, devront être affichés en rouge. Dans le
second exemple, seuls les éléments P de classe "entete"
devront être affichés en italique.
<H2 class=rouge>Un titre rouge</H2> <P class=entete>Ceci est le paragraphe d'entête... <P>Ceci est un paragraphe normal... <P class=rouge>Ceci est un paragraphe rouge...
Ceci est le paragraphe d'entête...
Ceci est un paragraphe normal...
Ceci est un paragraphe rouge...
Il est possible de préciser les propriétés qui doivent s'appliquer à un élément dans le cas où celui est utilisé à l'intérieur d'un autre élément (et pas ailleurs).
Dans le code HTML, on peut utiliser l'élément EM dans un entête H2 ou pas :
Un titre mis en valeur
Changer les propriétés des liens :
A:link { color : fushia; }
A:visited { color : olive; }
A:active { color : green; }
Peuvent être utilisés avec des contextes différents
A:link IMG { border : solid yellow; }
Peuvent être combinées avec des classes
A.uneclasse:link { color : #05f7a2 }
Pour mémoire car Netscape ne les implémente pas encore
P:first-letter {
font-size: 200%;
float: left;
}
P:first-line {
font-variant:small-caps;
}
Les propriétés des CSS peuvent être définies plusieurs fois. C'est toujours la dernière définition qui compte. Cela permet d'importer plusieurs feuilles de styles, et de redéfinir certains styles dans le document.
Supposons qu'on dispose d'une permière feuille de style, que nous appelerons style1.css qui contienne les propriétés suivantes :
Nous utilisons aussi une autre feuille de style, nommée style2.css et contenant les propriétés suivantes :
Dans une page donnée, nous incluons dans l'entête l'appel de ces deux feuilles, ainsi que la définition d'autres propriétés.
<HEAD>
<TITLE>...</TITLE>
<LINK rel=STYLESHEET href="style1.css" type="text/css">
<LINK rel=STYLESHEET href="style2.css" type="text/css">
<STYLE type="text/css"><!--
H1 { color : fushia; }
H2 { font-size : 16pt; }
H3 { font-size : 14pt; }
--></STYLE>
</HEAD>
Au bout du compte, déterminons les valeurs utilisées pour le document en cours :
H1 : fushia, 48 points H2 : vert, 16 points H3 : rose, 14 points
Pour déterminer la valeur d'une propriété, on dispose donc de la notion de cascade. Dans les cas où la propriété n'a pas été définie, deux possibilités se présentent :
Les valeurs initiales, et les propriétés hériées sont données dans l'index des propriétés.
Le chapitre suivant est consacré aux ...