I.

Polices de caractères

1. Introduction

La mise en forme du texte est réalisée grâce à l'utilisation de quelques propriétés,

gérant notamment la police (font en anglais).

2. Changer de police : font-family

font-family permet de spécifier quelle est la police à utiliser. Exemple

d'utilisation :

p
    {
        font-family : Verdana, Arial, sans-serif;
    }

Il faut indiquer au moins un nom de police. Si la police n'est pas trouvée dans le
système d'exploitation, la police par défaut est utilisée. Cette police est la Times New
Roman sur un PC, et Times Roman sur un Mac. C'est la raison pour laquelle il est
recommandé de spécifier plusieurs noms de polices, ainsi qu'une famille de polices
générale :

1. La police préférentielle en premier

2. Une police plus généralement répandue
3. Éventuellement d'autres choix de polices
4. Une famille de polices générale

Les familles de police générales sont

 serif, les polices avec empattement 

 sans-serif, les polices sans empattement 
 monospace, les polices à espacement fixe 
 cursive, les polices imitant grossièrement l'écriture manuelle 
 fantasy, les polices de fantaisie.

Dans le cas où aucune police spécifique ne peut être trouvée, ce dernier choix
permet de se reposer sur les polices définies par défaut sur le système, sans pour
autant trop dégrader le rendu visuel.

3. Changer la taille des caractères : font-size

font-size permet de spécifier la taille de la police à utiliser. Exemples

d'utilisation :

h4
    {

1|Page
        font-size : 1.2em;
    }

h3
    {
        font-size : 120%;
    }

h2
    {
        font-size : bigger;
    }

La syntaxe des trois possibilités de spécification de la taille suit celle des unités,
et il est possible d'utiliser de plus les mots-clefs smaller, small, normal, big et
bigger qui changent la taille des caractères d'un facteur prédéterminé.

4. Changer l'orientation des caractères : font-style

font-style permet de spécifier le « style » (normal ou italique) de la police à

utiliser. Les trois valeurs possibles sont normal, italic et oblique :

span.definition
    {
        font-style : italic;
    }

span.penche
    {
        font-style : oblique;
    }

span.normal
    {
        font-style : normal;
    }

normal est la valeur par défaut. oblique est un style où la police est inclinée. Le
rendu à l'écran est parfois similaire au style italique, mais en toute rigueur il devrait
en être différent.

5. Mettre un texte en petites capitales : font-variant

font-variant permet de spécifier une « variante » de la police à utiliser. Les

valeurs possibles sont normal et small-caps :

h4
    {
        font-variant : normal;

2|Page
    }

h4.grandtitre
    {
        font-variant : small-caps;
    }

small-caps permet de spécifier que le texte doit être écrit en « petites

6. Changer la graisse de la police : font-weight

font-weight permet de spécifier la graisse de la police à utiliser. Exemples

d'utilisation :

b.tresgras
    {
        font-weight : bolder;
    }

span.important
    {
        font-weight : 300;
    }

Les valeurs possibles peuvent être :

 Des nombres entiers de centaines (100, 200, (...), 800, 900) compris entre
100 et 900.
 normal, bold qui indiquent une graisse respectivement par défaut et
moyenne.
 bolder, lighter qui permettent d'augmenter ou de diminuer la graisse par
rapport à la valeur par défaut.

7. Le résumé : font

Il est possible de réunir plusieurs de ces propriétés en utilisant le raccourci font,

à condition de respecter toujours un ordre précis (style, graisse, taille puis famille).
Par exemple...

p.introduction
    {
        font : italic bold 12pt Times, serif;
    }

II. Texte

1. Spécifier l'interligne : line-height

3|Page
 line-height permet de spécifier l'écart entre deux lignes dans le texte. Exemples
d'utilisation :

p
    {
        line-height : 200%;
    }

Les valeurs possibles sont normal, un nombre positif (l'espacement entre deux
lignes est égal à la valeur par défaut multipliée par le nombre), ou bien toute
mesure de taille (une longueur ou un pourcentage).

2. Changer l'alignement horizontal d'un texte : text-align

text-align permet de spécifier l'alignement horizontal du texte. Exemples

d'utilisation :

h1
    {
        text-align : center;
    }

p.journal
    {
        text-align : justify;
    }

Les valeurs possibles sont left (valeur par défaut), right, center et justify.

3. Surligner, souligner, barrer : text-decoration

text-decoration permet de spécifier quel type de soulignement doit être appliqué

au texte. Exemple d'utilisation :

a:active, a:link, a:visited

    {
        text-decoration : none;
    }

Les valeurs possibles sont none (pas de soulignement), underline (soulignement),

overline (un trait au-dessus du texte), line-through (un trait au milieu du texte) et
blink (clignotement ; à éviter dans la mesure du possible pour ne pas faire fuir
l'internaute !).

4. Mettre un alinéa, indenter le texte : text-indent

text-indent permet de spécifier quelle indentation (ou retrait de première ligne)

appliquer à la première ligne du texte. Exemple d'utilisation :

4|Page
p
    {
        text-indent : 5em;
    }

La syntaxe de l'indentation à appliquer suit celle des unités. Elle peut être une
longueur ou un pourcentage.

5. Manipuler les majuscules et les minuscules : text-transform

text-transform permet de spécifier quelle transformation appliquer à la police.

Exemples d'utilisation :

h1
    {
        text-transform : uppercase;
    }

h2
    {
        text-transform : capitalize;
    }

Les valeurs possibles sont :

 none, la valeur par défaut.

 capitalize : chaque première lettre de mot est en majuscule.
 uppercase : chaque mot est en majuscules.
 lowercase : chaque mot est en minuscules.

6. Changer l'alignement vertical : vertical-align

vertical-align permet de spécifier quel alignement vertical appliquer au texte

par rapport à la ligne de base. Exemples d'utilisation :

img
    {
        vertical-align : 50%;
    }

img.middle
    {
        vertical-align : middle;
    }

.exponent
    {
        vertical-align : super;
    }

5|Page
 Les valeurs possibles sont :

 baseline, la valeur par défaut. L'alignement est fait relativement à la ligne de

base de l'élément-parent.
 middle : le milieu de l'élément est aligné avec la moitié de la hauteur de ligne
(le x-height) de l'élément-parent.
 sub : alignement en indice.
 super : alignement en exposant.
 text-top : alignement du haut de l'élément avec le point le plus haut de la
police de l'élément-parent.
 text-bottom : alignement du bas de l'élément avec le point le plus bas de la
police de l'élément-parent.
 top : alignement du haut de l'élément avec le point le plus haut de la ligne
courante.
 bottom : alignement du bas de l'élément avec le point le plus bas de la ligne
courante.
 Un pourcentage : ce pourcentage se réfère au line-height de l'élément-
parent.

7. Changer l'espace entre les mots : word-spacing

word-spacing permet de spécifier l'espacement entre les mots du texte. Exemples

d'utilisation :

p em
    {
        word-spacing : 0.4em;
    }

p.note
    {
        word-spacing : -0.2em;
    }

Cette propriété a comme valeur une longueur. Il est à noter qu'une valeur
négative est possible.

8. Changer l'espace entre les lettres : letter-spacing

letter-spacing permet de spécifier l'espacement entre les lettres du texte.

Exemples d'utilisation :

h1
    {
        letter-spacing : 0.1em;
    }

p.note

6|Page
    {
        letter-spacing : -0.1em;
    }

Cette propriété a comme valeur une longueur. Il est à noter qu'une valeur
négative est possible, mais le résultat est évidemment peu lisible. Une valeur de 0
empêche la justification.

III. Couleurs et fonds

1. Spécifier la couleur du texte : color

color permet de spécifier la couleur du texte. Exemples d'utilisation :

h1
    {
        color : blue;
    }

h2
    {
        color : #000080;
    }

h3
    {
        color : rgb(25%,50%,75%);
    }

Afin d'éviter d'aboutri à un texte illisible (par exemple, blanc sur blanc) quand
l'utilisateur a personnalisé sa feuille de style dans les préférences de son
navigateur, background-color doit être spécifié en même temps que color.

Cette propriété est compatible avec tous les navigateurs.

2. Spécifier une couleur de fond : background-color

a. Propriété

background-color permet de spécifier la couleur de fond de l'élément. Exemples

d'utilisation :

body
    {
        background-color : white;
    }

h1

7|Page
    {
        background-color : #000080;
    }

Afin d'éviter des conflits avec des feuilles de style personnelles spécifiées par des
utilisateurs, il est recommandé de spécifier également la propriété background-image
à chaque fois que background-color est utilisé. Souvent, background-image: none
suffit.

De plus, il est recommandé de spécifier à chaque fois la propriété color de telle

manière que le texte soit lisible sur le fond.

b. Compatibilité

Il n'y a pas de problème de compatibilité avec les navigateurs compatibles CSS

(même Internet Explorer 4 et Netscape 4), à une réserve près.

Netscape 4, en effet, ne remplit pas correctement un élément de type bloc avec la

couleur choisie, à moins de spécifier une bordure (même une bordure de largeur
nulle). Ajouter une bordure laisse un espace transparent entre le remplissage par la
couleur et la bordure. Netscape 4 possède une propriété... propriétaire, layer-
background-color, qui corrige ce problème.

3. Spécifier une image de fond : background-image

a. Propriété

background-image permet de spécifier une image de fond pour l'élément. Il faut

indiquer l'URL de l'image par rapport à l'emplacement de la feuille de style.
Exemples d'utilisation :

body
    {
        background-image : url(/images/ombrages.gif);
    }

p
    {
        background-image :
url(http://www.wpdfd.com/images/bluebg.gif);
    }

b. Compatibilité

Il n'y a pas de problème de compatibilité avec les navigateurs compatibles CSS

(même Internet Explorer 4 et Netscape 4), à une réserve près.

8|Page
 Netscape 4, en effet, ne remplit pas correctement un élément de type bloc avec
l'image choisie, à moins de spécifier une bordure (même une bordure de largeur
nulle). Ajouter une bordure laisse un espace transparent entre le remplissage par la
couleur et la bordure. Netscape 4 possède une propriété... propriétaire, layer-
background-color, qui corrige ce problème.

4. Changer la position par défaut de l'image de fond : background-

position

a. Propriété

background-position permet de spécifier la position initiale d'une image de fond.

Le moyen le plus simple est d'utiliser des mots-clefs :

 horizontaux, comme left, center, right.

 verticaux, comme top, center, bottom.

p.introduction
    {
        background-image : url(images/fond1.jpg);
        background-position : top center;
    }

Dans chaque paragraphe de class="introduction", l'image de fond est localisée

par l'URL relative images/fond.jpg. Elle est positionnée en haut et au milieu
horizontal du paragraphe.

Les pourcentages et les longueurs sont aussi autorisés. Les pourcentages se

réfèrent à la taille de l'élément, et non à celle de l'image lui servant de fond. Les
longueurs, bien que possibles, ne sont pas conseillées car l'affichage est alors trop
dépendant des conditions précises de visualisation du document.

Quand les pourcentages ou les longueurs sont utilisés, on indique d'abord la

position horizontale, puis la position verticale. Par exemple :

p.conclusion
    {
        background-image : url(images/fond2.jpg);
        background-position : 20% 65%;
    }

Dans chaque paragraphe de class="introduction", l'image de fond est localisée

par l'URL relative images/fond.jpg. L'image est positionnée de telle sorte que le
point situé à 20% de la largeur de l'image, comptée à partir de la gauche, et à 65%
de sa hauteur, comptée à partir du haut, est placé à 20% de la largeur du
paragraphe, compté à partir de la gauche, et à 65% de la hauteur de ce dernier,
comptée à partir du haut.

9|Page
 Si on donne uniquement la position horizontale, la position verticale est fixée à
50%. On peut combiner pourcentages et longueurs : background-position: 33% 2cm
est autorisé. En revanche, on ne peut combiner mots-clefs et pourcentages ou
longueurs.

b. Compatibilité

Cette propriété fonctionne avec Internet Explorer 4 et suivants, Netscape 6 et

suivants, Opera et Mozilla.

Affecter une propriété différente de la valeur par défaut, sous Internet Explorer
4 pour Windows déclenche un bogue dans le support de ce navigateur pour la
propriété background-repeat.

5. Contrôler la répétition d'une image de fond : background-repeat

a. Propriété

background-repeat permet de spécifier la manière dont une image de fond va être

répétée. Exemples d'utilisation :

p.introduction
    {
        background-image : url(images/fond1.jpg);
        background-repeat : repeat;
    }

p.conclusion
    {
        background-image : url(images/fond2.jpg);
        background-repeat : repeat-y;
    }

Les valeurs possibles sont :

 repeat : l'image est répétée verticalement et horizontalement.

 repeat-x : l'image est répétée horizontalement.
 repeat-y : l'image est répétée verticalement.
 no-repeat : l'image n'est pas répétée.

b. Compatibilité

Il n'y a pas de gros problème de compatibilité avec les navigateurs compatibles

CSS (même Internet Explorer 4 et Netscape 4).

Internet Explorer 4 pour Windows, cependant, ne place les images que de la

gauche vers la droite, et du haut vers le bas. Il s'ensuit qu'en spécifiant une

10 | P a g e
propriété background-position différente de la valeur par défaut, l'affichage reste
incomplet.

6. Contrôler le défilement de l'image de fond : background-

attachment

a. Propriété

background-attachment permet de spécifier la manière dont l'image de fond est

« attachée » au défilement de la fenêtre. Exemples d'utilisation :

body
    {
        background-image : url(images/fond0.jpg);
        background-attachment : fixed;
    }

Les deux valeurs possibles sont fixed (quand on agit sur les barres de
défilement, l'image ne bouge pas), et scroll, valeur par défaut (le défilement de
l'image suit celui du texte).

b. Compatibilité

Le support pour cette propriété varie selon les navigateurs :

 Internet Explorer à partir de la version 4

 Netscape à partir de la version 6
 Opera à partir de la version 5
 Mozilla : tous.

Internet Explorer pour Windows (jusqu'à la version 6), et les navigateurs Opera
(jusqu'à la version 6) ne supportent pas correctement la valeur fixed pour d'autres
éléments que l'élément <body>. Opera 7, Internet Explorer 5 pour Macintosh,
Netscape 6.2.1 et suivants, toutes les versions de Mozilla ont un support correct.

7. Le résumé : background

a. La propriété

Il est possible de réunir plusieurs de ces propriétés en utilisant le raccourci

background. Par exemple...

#supplement
    {
        background : #0c0 url(feuilles.jpg) no-repeat bottom right;
    }

11 | P a g e
 La déclaration précédente permet de spécifier que l'élément d'identifiant
supplement a une couleur de fond par défaut, #00cc00, associée à une image de fond
feuilles.jpg, alignée en bas à droite de l'élément, et ne se répétant pas.

b. Compatibilité

Le support pour ce raccourci varie selon les navigateurs :

 Internet Explorer à partir de la version 4

 Netscape à partir de la version 6
 Opera à partir de la version 5
 Mozilla : tous.

Ce raccourci est partiellement supporté par Netscape 4 ; mais cela n'est pas
documenté officiellement et n'est donc pas fiable.

IV. Les « boîtes »

1. Généralités

a. Introduction : le modèle de boîte

La recommandation CSS1 indique que tous les éléments HTML (sauf ceux qui ne
figurent que par leurs adresses : images, son, objets multimédia en général, plug-
in...) puissent être considérés comme des blocs rectangulaires. Ce bloc est
constitué de plusieurs couches (en pelures d'oignon en quelque sorte) ; on a de
l'intérieur vers l'extérieur :

 un contenu (content)
 une zone d'ajustement (padding)
 un encadrement (border)
 une marge (margin)

Cette terminologie est décomposée selon le côté concerné : droite (right), gauche
(left), dessus (top), dessous (bottom).

b. Règles d'attribution

12 | P a g e
 Pour tous les éléments définis ci-dessus, une propriété définit son épaisseur, il
s'agit :

margin padding border-width

margin-top padding-top border-top-width
margin- padding- border-right-
right right width
margin- padding- border-bottom-
bottom bottom width
margin-left padding-left border-left-width

Table 1. Propriétés pour l'ajustement de la taille des boîtes.

Chacune des propriétés citées en en-tête permet d'énoncer celles de la colonne

entière selon un protocole que nous allons illustrer par les exemples suivants :

 margin : 2em signifie margin-top: 2em; margin-right: 2em; margin-bottom:

2em; margin-left: 2em
 margin: 1em 2em signifie margin-top : 1em; margin-right : 2em; margin-
bottom : 1em; margin-left : 2em
 margin: 1em 2em 3em signifie margin-top : 1em; margin-right : 2em; margin-
bottom : 3em; margin-left : 2em
 margin: 1em 2em 3em -2em signifie margin-top : 1em; margin-right : 2em;
margin-bottom : 3em; margin-left : -2em

La règle est donc la suivante : les valeurs sont attribuées à partir du sommet
(top) dans le sens des aiguilles d'une montre (top, right, bottom, left). Lorsqu'une
valeur est manquante, on lui attribue celle du côté qui lui fait face.

2. Les propriétés de la marge extérieure : margin

Les valeurs possibles de la propriété sont un pourcentage, une longueur ou auto.

Le pourcentage est une fraction de la largeur de l'élément parent contenant le bloc.
Des valeurs négatives sont possibles dans les limites définies par l'implémentation.
Le mot clé auto laisse au navigateur la gestion de cette épaisseur.

3. Les propriétés de la marge intérieure : padding

Les valeurs possibles de cette propriété sont un pourcentage ou une longueur.

4. Les propriétés de la bordure : border

a. Propriétés de largeur: border-width

Les valeurs possibles de cette propriété sont une longueur, ou bien thin (mince),
medium ou thick (gros). Cette propriété est compatible avec tous les navigateurs.

b. Spécifier la couleur de la bordure : border-color

13 | P a g e
 border-color permet de spécifier la couleur de la bordure.

La répartition des couleurs s'organise en commençant au sommet, puis en

tournant dans le sens des aiguilles d'une montre. Si une couleur est manquante, on
prend celle qui lui fait face.

Si l'encadrement est présent mais pas la propriété border-color, le navigateur

reprend par défaut la couleur du texte (color).

Cette propriété est compatible avec tous les navigateurs, à la réserve près que
Netscape 4 n'accepte qu'une seule valeur de couleur.

c. Spécifier le type de trait de la bordure : border-style

border-style permet de spécifier le style de la bordure.

Les valeurs possibles sont :

 none, la valeur par défaut (absence de bordure)

 dotted, bordure en pointillés
 dashed, bordure en tirets
 solid, bordure continue
 double, bordure double
 groove, bordure 3D en creux
 ridge, bordure 3D en saillie
 inset, bloc 3D en arrière
 outset, bloc 3D en avant
 hidden, bordure cachée

La compatibilité dépend de la valeur de la propriété choisie :

 dashed, dotted et hidden ne sont supportées que par Netscape 6 et suivants,

Mozilla, Opera, Internet Explorer 4 sur Macintosh et Internet Explorer 5.5 et
suivants sous Windows.
 Les autres propriétés sont supportées par tous les navigateurs à partir des
versions 4. Netscape 4, cependant, définit une largeur de bordure nulle par défaut :
pour appliquer un style de bordure, il faut donc pour ce navigateur, indiquer une
bordure de largeur non nulle.

d. Raccourcis : border-top, border-right, border-bottom, border-left

border-top, border-right, border-bottom, border-left et border permettent des

raccourcis :

p.intro
    {
        border-top : thick blue double;

14 | P a g e
    }

p.conclu
    {
        border-left : medium red dotted;
    }

p.corps
    {
        border : thin medium thick red blue blue inset;
    }

On peut également choisir de n'appliquer un style particulier qu'à une bordure :

a:hover
    {
        border-bottom-style : dashed;
        border-bottom-color : gray;
        border-bottom-width : 1px;
    }

Ces raccourcis sont supportés par tous les navigateurs, sauf Netscape 4 qui ne
supporte que border-xxx-width, pour laquelle il fixe la valeur par défaut à 0, et non
medium.

5. Placement d'un élément de type bloc par rapport au contenu

environnant : float

float permet de spécifier la position d'un texte par rapport au flux de la page,
c'est-à-dire sans position « naturelle ». L'élément est alors sorti du flux. Cela
permet par exemple de placer une image de manière à ce que le texte dans lequel
elle se trouve la contourne.

Cette propriété peut prendre les valeurs none, right ou left. Dans l'exemple
suivant, le paragraphe de classe note sera « calé » à droite de la fenêtre.

p.note
    {
        float : right;
    }

6. Nettoyer les éléments flottants : clear

clear permet de spécifier si l'élément peut admettre un élément « flottant » sur

un de ses côtés.

Cette propriété peut prendre les valeurs none (la valeur par défaut), left, right
ou both. Si clear="left", l'élément est positionné en-dessous de tout élément

15 | P a g e
« flottant » sur sa gauche. Si clear="both", l'élément est positionné en-dessous de
tout élément « flottant » sur sa gauche ou sa droite. Par exemple...

h1
    {
        clear : left;
    }

... signifie qu'aucun élément flottant ne pourra se placer à gauche d'un titre de
niveau 1.

Cette propriété est supportée par tous les navigateurs.

7. Spécifier largeur et hauteur d'un élément : height, width

a. Le comportement théorique

Ces propriétés s'appliquent à tout élément de type bloc mais aussi aux éléments
insérés (dont ne figure que l'adresse url) comme les images.

Les valeurs possibles de ces propriétés sont une longueur, un pourcentage

(seulement pour width) et auto. Le pourcentage est une fraction de la taille du
conteneur parent. L'option auto se réfère aux dimensions intrinsèques du contenu
(par exemple la taille intrinsèque d'une image).

b. Compatibilité

Les recommandations du W3C stipulent que la largeur totale occupée à l'écran

par un élément est égale à la somme de width, du double de padding-width et du
double de border-width. Ce modèle de boîte standard est respecté par tous les
navigateurs sauf Internet Explorer, pour qui la largeur à l'écran n'est égale qu'à
width. C'est une source classique d'incompatibilités d'affichages entre navigateurs.

V. Listes

1. Spécifier une image comme puce dans une liste : list-style-image

list-style-image permet de spécifier une puce pour une liste. Il faut indiquer
l'URL de l'image à utiliser. Exemple d'utilisation :

ul.index
    {
        list-style-image : url(../images/rond_rouge.gif);
    }

2. Changer l'alignement du texte après la puce dans une liste : list-

style-position

16 | P a g e
 list-style-position permet de spécifier la position de la puce ou du numéro.
Exemple d'utilisation :

ul.dedans
    {
        list-style-position : inside;
    }

Les valeurs possibles sont inside et outside. Avec list-style-position: inside,

le numéro ou la puce est aligné avec le texte. Avec list-style-position: outside,
le numéro ou la puce est en marge du texte.

3. Changer la forme de la puce ou le type de numérotation : list-

style-type

list-style-type permet de spécifier le type de puce ou de numéro selon le type

de liste. Exemple d'utilisation :

ul.carres
    {
        list-style-type : square;
    }

Pour une liste non ordonnée, les valeurs possibles sont disc, circle, square et
none.

Pour une liste ordonnée, les valeurs possibles sont decimal (1, 2...), lower roman
(i, ii...), upper-roman (I, II...), lower-alpha (a, b...), upper-alpha (A, B...) et none.

VI. Autres propriétés

1. Contrôle de l'affichage ou de la disparition d'un élément : display

display permet de spécifier le mode d'affichage de l'élément. Exemple

d'utilisation :

h4
    {
        display : inline;
    }

Les valeurs possibles sont :

 block : l'élément est traité comme un nouveau bloc comme le sont, par
défaut, les titres et les paragraphes. Valeur compatible avec tous les navigateurs, y
compris Netscape 4.

17 | P a g e
  inline : l'élément sera affiché dans le cours de la ligne courante. Valeur
compatible avec tous les navigateurs, y compris Netscape 4.
 list-item : la présentation sera celle d'une liste. Valeur supportée par
Netscape 4+, Internet Explorer 6+ sous Windows, IE 5+ pour Macintosh, Mozilla,
Opera.
 none : l'élément sera invisible. Valeur compatible avec tous les navigateurs, y
compris Netscape 4.

2. Prise en charge des blancs : white-space

white-space permet de spécifier la manière dont les blancs sont pris en compte.
Exemple d'utilisation :

div.telque
    {
        white-space : pre;
    }

Les valeurs possibles sont :

 normal : le navigateur gère les retours à la ligne normalement en interprétant

les "blancs" comme des coupures possibles et en ignorant ceux du texte source.
 pre : comme l'élément pre, pour préformaté. Le texte sera reproduit tel quel
dans la fenêtre en respectant tous les blancs et les retours à la ligne du texte
source.
 nowrap : interdit le retour à la ligne automatique. Il ne pourra être que
volontaire par l'élément br.

18 | P a g e