Propriétés CSS
POLICES DE CARACTERES
Propriétés Signification
font-family Polices de caractères. On
peut mettre une liste de
police dans l’ordre de
préférence.
Les noms des polices
doivent dans ce cas être
séparés par des virgules.
font-size Définit la taille de la police
(taille absolue, taille
relative, longueur ou
pourcentage)
font-style Définit le style d'écriture
font-weight Définit le poids (épaisseur)
de la police de caractères
font-variant Définit les petites
majuscules
font Spécifie globalement (en
une seule fois) toutes les
propriétés de la police.
Attention : pas de virgule
entre les valeurs, sauf pour
les polices s'il y en a
plusieurs.
Valeurs possibles Exemples
arial, verdana, serif, sans-serif, BODY {font-family :
cursive, fantasy, monospace , … arial;}
P{font-family: cursive ,
helvetica;}
Taille absolue BODY {font-size : 18pt;}
- xx-small, x-small, small, medium, P {font-size : smaller;}
large, x-large, xx-large PRE {font-size : 2em;}
- valeur numérique en points (pt), en P {font-size : 300%;}
cm.
Taille relative
smaller, larger : par rapport à la taille
courante (parent)
Longueur (em)
1em correspond à la taille de
caractères utilisée. Si vous avez défini
une taille de 12pt, 1em vaut alors
12pt. Nous avons bien une unité
relative à la taille de corps utilisée.
Pourcentage
multiplie la taille de la police courante
(parent) par un pourcentage
normal, italic, oblique P {font-style : italic ;}
- normal, bold, bolder, lighter BODY {font-weight :
- valeur numérique (multiple de 100) bold;}
entre 100 et 900, avec 400 pour
normal, 500 pour moyen, 700 pour
gras.
bolder et lighter augmentent ou
diminuent le poids de 100 par rapport
au poids courant (parent) : par
exemple, de 200 à 300 (bolder) ou de
300 à 200 (lighter)
normal, small-caps BODY {font-variant :
small-caps ;}
L'ordre des valeurs est le suivant : BODY {font: normal
font-style, font-variant, font-weight, small-caps bold 14pt
font-size, font-family arial, verdana, sans-serif;}
1
 TEXTES ET PARAGRAPHES
Propriétés Signification
color Définit la couleur des
caractères
text-decoration Spécifie les soulignements :
soulignement,
surlignement, barré,
clignotement, ...
text-transform Définit la casse
(majuscule/minuscule) du
texte.
word-spacing Espacement des mots
letter-spacing Espacement entre les
caractères.
white-space Détermine la façon dont
sont traités les espaces et
les sauts de ligne
text-shadow Définit l'ombrage du texte.
4 mesures concernent
l'ombrage, à donner dans
l'ordre : à droite, en bas,
rayon de l'effet et couleur
de l'ombrage.
text-indent Retrait de la première ligne.
line-height interligne
height Définit la hauteur d'un
élément HTML (texte,
image, ...).
Si le contenu est textuel,
des barres de défilement
sont ajoutées si besoin.
width Définit la largeur d'un
élément HTML (texte,
image, …).
Valeurs possibles Exemples
- nom de couleur : red, yellow, ... H2 {color:red;}
- code hexadécimal de la couleur H1 { color: #00FFFF; }
(ex: #00FF00) P{color: rgb(0,255,255);}
- triplet décimal : rgb(0,255,255)
- underline (souligné) P,PRE {text-decoration:
- overline (surligné) underline;}
- line-through (barré)
- blink (clignotant)
- none (aucun)
- capitalize (première lettre des mots H1, H2 {text-tranform:
en majuscule) uppercase;}
- uppercase (toutes les lettres en
majuscules)
- lowercase (toutes les lettres en
minuscules)
- none
- normal BODY {word-spacing:
- valeur en em, ex, px, in, cm, mm, pt, 2em ;}
pc H1 {word-spacing:
Remarque : 1ex correspond à la normal ;}
hauteur de l’œil du caractère utilisé.
La hauteur de l’œil est la hauteur d’un
caractère en bas de casse : a, o, u…
Cela dépend bien de la taille de
caractère utilisée.
Voir ci-dessus H1 {letter-spacing: -
0.2em; }
- normal (passage à la ligne P {white-space: pre}
automatique),
- pre (respect de la saisie telle quelle)
- nowrap (pas de passage à la ligne
automatique)
valeur en px, pt, … H1 {text-shadow: 2px 2px
4px red;}
- valeur en em, ex, px, in, cm, mm, P {text-indent: 1.5cm;}
pt, pc
- valeur en pourcentage
- longueur en em, ex, px, in, cm, mm, P {line-height: 1.5cm;
pt, pc. font-size: 12pt;}
- pourcentage : le pourcentage
indiqué, multiplié par la taille des
caractères….
- valeur : exprimée en unité de DIV {height: 60px; }
longueur (em, ex, px, in, cm, mm, pt, TABLE {height: 90%;}
pc)
- valeur en pourcentage : La valeur est
calculée sur la hauteur de la boîte
englobante.
- auto : La valeur dépend de celles des
autres propriétés.
Voir ci-dessus. DIV {width: 100px;}
2
text-align Alignement horizontal - left : les lignes de textes sont P {text-align: center;}
alignées sur leur gauche.
- right : les lignes de texte sont
alignées sur leur droite.
- center : les lignes de texte sont
alignées par rapport à leur centre.
- justify : les lignes de texte sont
alignées sur leur gauche et leur droite.
vertical-align Alignement vertical - baseline : aligne la ligne de base ou TD {vertical-align:
le bas de l'élément sur celle de middle ;}
l’élément parent (valeur par défaut).
- sub : place l’élément en indice.
- super : place l’élément en exposant.
- text-top : aligne le haut de l’élément
avec le haut du texte parent.
- text-bottom : aligne le bas de
l’élément avec le bas du texte parent.
- top : aligne le haut de l’élément sur
l’élément le plus haut dans la ligne.
- middle : aligne le milieu vertical de
l’élément avec le milieu vertical de
l’élément parent.
- bottom : aligne le bas de l’élément
sur l’élément le plus bas dans la ligne.
- valeur en pourcentage : c’est une
valeur relative dont la référence est la
propriété line-height, l’interligne.
100% représente l’interligne en cours

COULEURS DE FOND (ARRIERE-PLAN)

Propriétés Signification Valeurs possibles Exemples
background- Définit la couleur de fond - nom de couleur : red, yellow, ... BODY {background-
color pour un élément - code hexadécimal de la couleur (ex: color: #ffcc99;}
#00FF00) P {background-color:
- triplet décimal : rgb(0,255,255): rgb(0,200,100);}
background- Spécifie une image de fond - url : indique l’URL de l’image à P {background-image :
image pour un élément utiliser. url(ma-photo.jpg);}
- none : indique que vous n’utiliser
pas d’image d’arrière-plan (valeur par
défaut)
background- Précise comment répéter - repeat : l’image est répétée BODY {background-
repeat l'image de fond horizontalement et verticalement de image: url(ma-photo.jpg);
façon à recouvrir la totalité de background-repeat:
l’élément. repeat-x;}
- repeat-x : l’image n’est répétée que
horizontalement.
- repeat-y : l’image n’est répétée que
verticalement.
- no-repeat : l’image n’est pas
répétée et est positionnée en haut à
gauche de l’élément si la propriété
background-position n’est pas
utilisée.
background- Spécifie si l'image de fond - scroll : l’image suit le déplacement P {background-image:
attachment est attachée au texte de de l’élément. url(../images/montane.gif);
premier plan (elle défile - fixed : l’image reste fixe dans background-attachment:
avec le texte) ou si elle est l’élément quand la barre de fixed;}

3
 fixe.
background- Spécifie la position de
position départ de l'image de fond
Background Spécifie globalement (en
une seule fois) toutes les
propriétés de l'image de
fond
défilement est utilisée.
- positionnement en valeur absolue : BODY {background-
valeur qui s’exprime par paire en cm, image: url(ma-photo.jpg);
mm, pt, …. Ex : 1 cm 2cm (à 1cm du background-repeat:
bord gauche et à 2cm du bord no-repeat; background-
supérieur de l'élément) position: right top;}
- positionnement en pourcentage :
valeur qui s’exprime par paire. Ex :
50% 0% : l’image se trouve à la
moitié de la largeur de l’élément et
sur le coté haut.
0% 0% (coin supérieur gauche)
100% 100% (coin inférieur droit)
- top | center | bottom : sont les mots
clés réservés pour placer l’image dans
le sens vertical.
- left | center | right : sont les mots
clés réservés pour placer l’image dans
le sens horizontal.
L'ordre de spécification doit être P {background : black
background-color, background-image, url(logo.gif) repeat-y fixed
background-repeat, background- left top;}
attachment, background-position

MISE EN FORME DES LIENS (couleur, police, ...)

Propriétés Signification Valeurs possibles Exemples
A:link Concerne le lien couleur, police, taille, … a:link {text-decoration: none; color:
avant activation #0000FF;}
A:visited Concerne le lien voir ci-dessus a:visited {text-decoration: none; color:
visité #6699CC;}
A:active Concerne le lien voir ci-dessus a:active {text-decoration: none; color:
activé #FF0000;}
A:hover Concerne le lien voir ci-dessus a:hover {text-decoration: underline; color:
survolé #FF0000;}

LES MARGES
Propriétés Signification Valeurs possibles Exemples
margin-top Ces quatre propriétés - auto : laisse la main au navigateur pour P {margin-top: 6pt ;}
margin-bottom définissent afficher les marges externes.
margin-right l'espacement entre - valeur absolue en em, ex, px, in, cm,
margin-left l'élément et les mm, pt, pc
éléments voisins. - valeur en pourcentage : définit la
longueur par rapport à l’élément parent.

margin Spécifie globalement voir ci-dessus TABLE {margin: 2cm 1cm 2cm
(en une seule fois) les 2cm;}
4 marges. L'ordre :
marge haute, droite, P {margin: 4em 2em ;}
basse, gauche. Si une
seule valeur est
spécifiée, elle sera
appliquée aux quatre
marges. Si deux ou
trois valeurs sont
spécifiées, les valeurs
manquantes sont
reprises sur les côtés
opposés.

4
 LES BORDURES
Propriétés Signification Valeurs possibles Exemples
border-top- Ces 4 propriétés - thin : bordure mince IMG {border-top-width: 20px;}
width spécifient la largeur - medium : bordure moyenne (valeur
border-bottom- de la bordure d'un par défaut)
width élément pour chaque - thick : bordure épaisse
border-right- côté. - valeur absolue en em, ex, px, in, cm,
width mm, pt, pc
border-left-
width
border-width Spécifie globalement voir ci-dessus IMG {border-width: medium 0pt
(en une seule fois) la 0pt thick;}
largeur des quatre
bordures.
Même remarque que
pour MARGIN.
border-top- Ces propriétés voir les valeurs de la couleur de la P {border-bottom-color:red;}
color définissent la couleur propriété COLOR
border-bottom- de la bordure autour
color d'un élément (pour
border-right- chaque coté
color séparément).
border-left-
color
border-color Définit globalement voir ci-dessus P {border-color: #99ff00;}
(en une seule fois) la
couleur des quatre
bordures.
border-top- Ces propriétés - solid : un trait plein P {border-bottom-style:dashed;}
style définissent le style de - dashed : des tirets
border-bottom- la bordure. - dotted : des pointillés
style - double : des doubles traits pleins
border-right- - ridge : effet 3D
styler - none : pas de bordure
border-left- …
style

border-style Spécifie globalement voir ci-dessus P {border-style:solid;}

le style des quatre
bordures.
border Spécifie globalement voir ci-dessus IMG {border: ridge medium blue;}
(en une seule fois)
toutes les valeurs des
bordures (style,
épaisseur, couleur).

ESPACEMENTS INTERIEURS DES ELEMENTS

Propriétés Signification Valeurs possibles Exemples
padding-top Ces propriétés - valeur absolue en em, ex, px, TD {padding-top: 5px; padding-bottom:
padding- spécifient la distance in, cm, mm, pt, pc 1cm;}
bottom entre les bordures de - valeur en pourcentage de la
padding-right la boîte (exemple largeur de l'élément parent
padding-left d'une cellule) et
l'élément au sein de
cette boîte (le texte
de la cellule).
padding Spécifie globalement voir ci-dessus TD {padding: 10pt;}
les quatre valeurs.

5
 TABLEAUX
Propriétés Signification Valeurs possibles Exemples
border-collapse Fusion ou non des - collapse : les bordures des TABLE {border-collapse: collapse;}
bordures des cellules sont fusionnées.
cellules. - separate : les bordures des
cellules sont individualisées
pour chaque cellule.
border-spacing Espacement des valeur exprimée en unité de TABLE {border-spacing: 5px;}
cellules. longueur (em, ex, px, in, cm,
mm, pt, pc)
empty-cells Affiche ou masque - show : affiche les bordures et TABLE {empty-cells: hide;}
les cellules vides. l’arrière-plan des cellules vides.
- hide : masque les bordures et
l’arrière-plan des cellules vides.
caption-side Position du titre - top : en haut du tableau. TABLE {caption-side:bottom;}
d'un tableau. - bottom : en bas du tableau.
- right : à droite du tableau
- left : à gauche du tableau.
table-layout Largeur fixe ou - auto : valeur par défaut TABLE {
variable signifiant que les largeurs table-layout: fixed;
dépendent du contenu des width: 600px;
cellules. }
- fixed : les largeurs ne
dépendent pas du contenu des
cellules mais de la largeur de la
table et des colonnes.

LES LISTES
Propriétés Signification Valeurs possibles Exemples
list-style-type Définit le type de - disc : puce ronde et pleine LI {list-style-type : upper-roman;}
puces ou numéros (valeur par défaut).
pour une liste. - circle : puce ronde et creuse.
- square : puce carrée et pleine.
- decimal : numérotation en
chiffres arabes (1, 2, 3, …).
- lower-roman : numérotation
en chiffres romains minuscules
(i, ii, iii, …).
- upper-roman : numérotation
en chiffres romains majuscules
(I, II, III, …).
- lower-alpha : numérotation
alphabétique minuscule (a, b,
c,...).
- upper-alpha : numérotation
alphabétique majuscule (A, B,
C, …).
- none : aucune valeur
d’énumération.
list-style-image Permet d’utiliser une - url : permet d’indiquer le LI {list-style-image: url(bulle.gif);}
image comme type chemin d’accès à l’image.
de marque - none : indique que vous
d’énumération pour n’utiliser pas d’image, donc pas
les listes à la place de chemin d’accès à préciser.
d'une puce ou une
numérotation.

6
list-style- Permet de spécifier - inside : lors d'un retour à la LI {list-style-position: inside;}
position l'alignement gauche ligne automatique, le texte
du texte par rapport à s'aligne au début de la puce.
l'item ou puce lors - outside : lors d'un retour à la
d'un retour à la ligne ligne automatique, le texte
automatique. s'aligne à la fin de la puce
(valeur par défaut)
list-style Permet de spécifier voir ci-dessus OL {list-style: lower-alpha outside}
globalement les
valeurs pour les
propriétés list-style-
type, list-style-image
et list-style-position

AFFICHAGE DES ELEMENTS

Propriétés Signification Valeurs possibles Exemples
display Détermine le type de - none : l'élément ne sera pas .classdisplay {display : none;}
l’élément. Elle affiché. Il sera retirer du
permet de redéfinir document et de la mise en page.
un élément en ligne - block : l'élément devient de
comme un élément type "block" (bloc, comme <p>)
bloc et inversement. - inline : l'élément devient de
type "inline" (en ligne, comme
<b>)
visibility Détermine si un - hidden : caché .classvisibility {visibility: hidden;}
élément est visible ou - visible : visible (par défaut).
caché. Remarque : display:none; fait
complètement disparaître
l'élément, tandis que
visibility:hidden; masque
l'élément, qui continue quand
même à prendre de la place sur
l'écran.

clip : Détermine la partie - auto .coupe {position: absolute;

visible de l’élément. - rect (val1 val2 val3 val4) clip : rect (0px 50px 115px 0px) ;
Cela permet de n'afficher qu'une }
partie rectangulaire d'un
élément. (val1 val2 val3 val4)
indiquent les coordonnées du
rectangle qui sera affiché.
Elles correspondent
respectivement aux coins haut
gauche, haut droite, bas droit et
bas gauche du rectangle.
overflow Détermine ce que le - visible : tout l'élément sera .boite {width: 280px;
navigateur doit faire affiché (par défaut). height: 60px;
lorsqu’un élément est - hidden : l'élément sera coupé border: 1px solid black;
plus grand que s'il dépasse les limites définies overflow: auto;
l’élément parent qui par height et width. On ne }
le contient. pourra pas voir la partie du texte
coupée.
- scroll : tout comme hidden,
l'élément sera coupé s'il dépasse
les limites. Toutefois, cette fois
le navigateur ajoutera des barres
de défilement pour qu'on puisse
voir la suite du texte.
- auto : c'est le navigateur qui
décide.

7
 POSITIONNEMENT DES ELEMENTS
Propriétés Signification Valeurs possibles Exemples
float Spécifie de quel coté de - left : aligne l’élément concerné IMG {float:left;width: 100px;}
l’élément boîte parent à gauche, poussant les autres
doit s’aligner l’élément éléments à s’aligner à droite.
concerné. - right : aligne l’élément
concerné à droite, poussant les
autres éléments à s’aligner à
gauche.
- none : ne spécifie rien et rend
la main au navigateur.
clear Permet d’annuler le - right : annule le flottement à P {clear:both;}
flottement induit par la droite
propriété float - left : annule le flottement à
gauche
- both : annule le flottement des
deux cotés
- none : réglage par défaut,
l'effet de flottement ne cessera
que lorsque les éléments voisins
épuiseront la hauteur du flottant
position Définit le type de - static : positionnement DIV {position: absolute; right: 20px;
positionnement d'une normale (par défaut) bottom:20px;}
boîte (élément) par - relative : position relative par
rapport au haut, droit, bas
rapport à l’élément parent
et gauche de la page - absolute : position absolue par
(absolue) ou de l'élément rapport au coin en haut à gauche
parent (relative) - fixed : position fixe
top Définit la position de valeur en px, %, em, … DIV {position: absolute; left: 40px;
bottom l’élément par rapport au top: 40px;}
left haut (top), au bas
right (bottom), à gauche (left),
à droite (right).
A utiliser pour un
positionnement absolu,
fixe ou relatif
z-index Permet de superposer des un nombre entier positif ou DIV {z-index: 1}
éléments (image, texte, négatif
etc). (voir exemple ci-dessous)
Avec z-index, on attribue
un numéro de profondeur
(axe Z). Cela affiche les
éléments sous forme de
pile.
Voici un exemple de superposition d'éléments avec les propriétés
z-index et position

<img src="singe.jpg" style="position:absolute;top:80px; left:40px; z-

index:1;">
<img src="hippo.jpg" style="position:absolute;top:90px; left:80px; z-
index:2;">
<img src="cheval.jpg" style="position:absolute;top:150px; left:110px; z-
index:3;">
<p style="position:absolute;top:120px; left:30px; z-index:4;font-weight:
bold;font-size:16pt;">
Mes animaux préférés
</p>