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.
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-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, …).
text-decoration- Spécifie le type de la
line décoration utilisée. Cette
propriété accepte une ou
plusieurs valeurs.
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)
- 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;}
- underline (souligné) ,PRE {text-decoration-
- overline (surligné) line: underline;}
- line-through (barré)
- blink (clignotant)
- none (aucun)
2
text-decoration- Spécifie la couleur de la
color décoration utilisée.
text-decoration- Spécifie le style à utiliser
style pour la décoration.
text-decoration Spécifie globalement (en
une seule fois) toutes les
propriétés de la décoration.
text-align Alignement horizontal.
vertical-align Alignement vertical.
Cette propriété peut être
utilisée dans deux cas : 1-
Afin d'aligner verticalement
la boîte d'un élément en
ligne à l'intérieur de la boîte
en ligne de son conteneur
(par exemple pour aligner
verticalement une image
(<img> sur une ligne de
texte). 2- ou pour aligner
verticalement le contenu
d'une cellule dans un
tableau.
Elle ne s'applique qu'aux
cellules de tableaux et aux
éléments en ligne (inline),
elle ne peut pas être utilisée
pour aligner verticalement
les éléments de bloc.
COULEURS DE FOND (ARRIERE-PLAN)
Propriétés Signification
background- Définit la couleur de fond
color pour un élément.
background- Spécifie une image de fond
image pour un élément.
- nom de couleur : red, yellow, ... ,PRE {text-decoration-
- code hexadécimal de la couleur (ex: color: red;}
#00FF00)
- triplet décimal : rgb(0,255,255)
- solid : un trait plein ,PRE {text-decoration-
- dashed : des tirets style: dotted;}
- dotted : des pointillés
- double : des doubles traits pleins
- wavy : ondulé
…
L'ordre des valeurs est le suivant : .PRE {text-decoration:
text-decoration-line, text-decoration- underline red dotted;}
color, text-decoration-style
Si la valeur de l'une de ses propriétés
est absente, la valeur par défaut sera
définie automatiquement. La text-
decoration-line est obligatoire.
- 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.
- 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
Valeurs possibles Exemples
- nom de couleur : red, yellow, ... BODY {background-
- code hexadécimal de la couleur (ex: color: #ffcc99;}
#00FF00) P {background-color:
- triplet décimal : rgb(0,255,255) rgb(0,200,100);}
- url : indique l’URL de l’image à P {background-image :
utiliser. url(ma-photo.jpg);}
- none : indique que vous n’utiliser
pas d’image d’arrière-plan (valeur par
défaut)
3
background- Précise comment répéter
repeat l'image de fond.
background- Spécifie si l'image de fond
attachment est attachée au texte de
premier plan (elle défile
avec le texte) ou si elle est
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
- repeat : l’image est répétée BODY {background-
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
qu’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.
- scroll : l’image suit le déplacement P {background-image:
de l’élément. url(../images/montane.gif);
- fixed : l’image reste fixe dans background-attachment:
l’élément quand la barre de fixed;}
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 est P {background: black
background-color, background-image, url(logo.gif) left top
background-position background- repeat-y fixed;}
repeat, background-attachment

LES MARGES
Propriétés Signification
margin-top Ces quatre propriétés définissent
margin-bottom l'espacement entre l'élément et les
margin-right éléments voisins.
margin-left
margin Spécifie globalement (en une seule
fois) les 4 marges. L'ordre : marge
haute, droite, 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.
Valeurs possibles Exemples
- auto : laisse la main au P {margin-top: 6pt ;}
navigateur pour afficher les
marges externes.
- valeur absolue en em, ex, px, in,
cm, mm, pt, pc
- valeur en pourcentage : définit la
longueur par rapport à l’élément
parent.
Voir ci-dessus TABLE {margin: 2cm 1cm
2cm 2cm;}
P {margin: 4em 2em ;}

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

border-style Spécifie globalement le style des Voir ci-dessus P {border-style:solid;}

quatre bordures.
border Spécifie globalement (en une seule Voir ci-dessus IMG {border: ridge medium blue;}
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 spécifient la - valeur absolue en em, ex, px, in, TD {padding-top: 5px;
padding- distance entre les bordures de la cm, mm, pt, pc padding-bottom: 1cm;}
bottom boîte (exemple d'une cellule) et - valeur en pourcentage de la
padding-right l'élément au sein de cette boîte (le largeur de l'élément parent
padding-left texte de la cellule).
padding Spécifie globalement les quatre Voir ci-dessus TD {padding: 10pt;}
valeurs.

5
 TABLEAUX
Propriétés Signification Valeurs possibles Exemples
border-collapse Fusion ou non des bordures des - collapse : les bordures des TABLE {border-collapse:
cellules. cellules sont fusionnées. collapse;}
- separate : les bordures des
cellules sont individualisées pour
chaque cellule.
border-spacing Espacement des cellules. valeur exprimée en unité de TABLE {border-spacing:
longueur (em, ex, px, in, cm, mm, 5px;}
pt, pc)
empty-cells Affiche ou masque les cellules - show : affiche les bordures et TABLE {empty-cells:
vides. l’arrière-plan des cellules vides. hide;}
- hide : masque les bordures et
l’arrière-plan des cellules vides.
caption-side Position du titre d'un tableau. - top : en haut du tableau. TABLE {caption-
- bottom : en bas du tableau. side:bottom;}
- right : à droite du tableau
- left : à gauche du tableau.
table-layout Largeur fixe ou variable. - auto : valeur par défaut TABLE {
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
list-style-type Définit le type de puces ou
numéros pour une liste.
list-style-image Permet d’utiliser une image
comme type de marque
d’énumération pour les listes à la
place d'une puce ou une
numérotation.
Valeurs possibles Exemples
- disc : puce ronde et pleine LI {list-style-type : upper-
(valeur par défaut). roman;}
- 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, d,
...).
- upper-alpha : numérotation
alphabétique majuscule (A, B, C,
…).
- none : aucune valeur
d’énumération.
- url : permet d’indiquer le LI {list-style-image:
chemin d’accès à l’image. url(bulle.gif);}
- none : indique que vous
n’utilisez pas d’image, donc pas
de chemin d’accès à préciser.

list-style- Permet de spécifier l'alignement - inside : lors d'un retour à la LI {list-style-position:

position gauche du texte par rapport à l'item ligne automatique, le texte inside;}
ou puce lors d'un retour à la ligne s'aligne au début de la puce.
automatique. - outside : lors d'un retour à la

6

list-style Permet de spécifier globalement
les valeurs pour les propriétés list-
style-type, list-style-image et list-
style-position
ligne automatique, le texte
s'aligne à la fin de la puce (valeur
par défaut)
Voir ci-dessus OL {list-style: lower-alpha
outside}

AFFICHAGE DES ELEMENTS

Propriétés Signification Valeurs possibles Exemples
display Détermine le type de l’élément. - none : l'élément ne sera pas .classdisplay {display :
Elle permet de redéfinir un affiché. Il sera retiré du document none;}
élément en ligne comme un et de la mise en page.
élément bloc et inversement. - block : l'élément devient de type
"block" (bloc, comme <p>)
- inline : l'élément devient de type
"inline" (en ligne, comme <b>)
- inline-block : l'élément est une
boite, mais lui-même est inséré
dans le flot en mode inline, sans
retour à la ligne
-…
visibility Détermine si un élément est visible - hidden : caché .classvisibility {visibility:
ou caché. - visible : visible (par défaut). hidden;}
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.

overflow Détermine ce que le navigateur
doit faire lorsqu’un élément est
plus grand que l’élément parent
qui le contient.
- visible : tout l'élément sera .boite {width: 280px;
affiché (par défaut). height: 60px;
- hidden : l'élément sera coupé s'il border: 1px solid
dépasse les limites définies par black;
height et width. On ne pourra pas overflow: auto;
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.

POSITIONNEMENT DES ELEMENTS

Propriétés Signification Valeurs possibles Exemples
float Spécifie de quel coté - left : aligne l’élément concerné à IMG {float:left;width: 100px;}
de l’élément boîte gauche, poussant les autres
parent doit s’aligner éléments à s’aligner à droite.
l’élément 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;}

7
 flottement induit par droite.
la propriété float. - left : annule le flottement à
gauche.
- both : annule le flottement des
deux côté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 normale DIV {position: absolute; right: 20px;
positionnement d'une (par défaut). bottom:20px;}
boîte (élément) par - relative : position relative par
rapport au haut, droit, rapport à sa position initiale.
bas et gauche de la - absolute : position absolue par
page ou de l'élément rapport à son élément parent le plus
parent. proche.
- fixed : position fixe.
top Définit la position de Valeur en px, %, em, … DIV {position: absolute; left: 40px;
bottom l’élément par rapport top: 40px;}
left au haut (top), au bas
right (bottom), à gauche
(left), à droite (right).
A utiliser pour un
positionnement
absolu, fixe ou relatif
z-index Permet de superposer Un nombre entier positif ou négatif DIV {z-index: 1}
des éléments (image, (voir exemple ci-dessous)
texte, etc).
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>