Cours HTML : les feuilles de style

Les feuilles de style

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.

Sommaire

  1. Principes généraux
    1. Les règles
    2. Placer une feuille de style
  2. Quelques propriétés pour commencer
  3. Plus fort !
    1. Les classes d'éléments
    2. Contextes
    3. Pseudo-classes
    4. Pseudo-éléments
  4. Cascade et Héritage
    1. La notion de "Cascade"
    2. Héritage

Principes généraux

Les règles

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
}

L'estuaire de Seine

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.

Placer une feuille de style

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.

1. Dans l'entête du document
<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.

2. Dans un autre fichier
<HEAD>
<TITLE>...</TITLE>
<LINK rel=STYLESHEET href="styles.css" type="text/css">
</HEAD>
styles.css est le nom du fichier contenant les styles.

Quelques propriétés pour commencer

Voici tout d'abord un ensemble de propriétés parmi les plus utilisées.
font-family
Nom de la police de caractères à utiliser
font-family : Arial;


font-style
Style de la police de caractères. Valeurs possibles : normal, italic, oblique
font-style : italic;


font-weight
Epaisseur de la police de caractères. Valeurs possibles normal, bold, bolder, lighter, 100, 200, 300,... 900.
font-weight : bold;


font-size
taille de la police de caractères. Valeurs possibles xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller.
On peut aussi utiliser une taille absolue : 12pt (pour 12 points) ou un pourcentage (par rapport à la taille par défaut).
font-size : x-small;
font-size : 18pt;
font-size : 150%;


text-align
Alignement du texte. Valeurs possibles : left, right, center, justify
text-align : center;


text-decoration
Valeurs possibles : none, underline, overline, line-through, blink (Ces valeurs peuvent être combinées)
text-decoration : underline line-through;


text-transform
Valeurs possibles : capitalize, uppercase, lowercase, none
text-transform : uppercase;


color
Pour indiquer la couleur du texte.
color : red;
color : #fd4a88;
color : rgb(125,32,98);


background-color
Couleur du fond
background-color : blue;


background-image
Image à utiliser pour le fond. Valeurs possibles : url("...") ou none.
BODY { background-image: url("monfond.jpg") }
P { background-image: none }


margin-top, margin-bottom, margin-left, margin-right
Les marges (respectivement au dessus, au dessous, à gauche et à droite).
On peut utiliser différentes unités de mesures :
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
margin-top: 1em
margin-bottom: 2ex
margin-left: 12px
margin-right: 2cm


border-style
Style de la bordure. Valeurs possibles : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-style : solid;


border-width
Epaisseur de la bordure. Valeurs possibles : thin, medium, thick ou bien une longueur.
border-width : thin; border-width : 3px;


border-color
Couleur de la bordure.
border-color : red;


float
Valeurs possibles : left, center, right
float : right;

Plus fort !

Les classes d'éléments

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...

Un titre rouge

Ceci est le paragraphe d'entête...

Ceci est un paragraphe normal...

Ceci est un paragraphe rouge...

Contextes

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).

H2 EM {color : green}

Dans le code HTML, on peut utiliser l'élément EM dans un entête H2 ou pas :

<H2>Un titre <EM>mis en valeur</EM></H2>
<P>Du texte <EM>mis en valeur</EM>

Un titre mis en valeur

Un titre mis en valeur

Pseudo-classes

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 }

Pseudo-éléments

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;
}

Cascade et Héritage

La notion de "Cascade"

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 :

H1 { color : red; font-size : 48pt }
H2 { color : blue; font-size : 12pt }

Nous utilisons aussi une autre feuille de style, nommée style2.css et contenant les propriétés suivantes :

H2 {color : green; }
H3 {color : pink; font-size : 12pt }

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

Héritage

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 ...


Dominique Archambault, 1998