Memento de propriétés CSS

Typographie

Propriété Valeurs (exemples) Description 
font-family
 
police1, police2, police3, serif, sans-serif, monospace
 Nom de police 
@font-face
 
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.woff2');
}
 Police personnalisée 
font-size
 
1.3em, 16px, 120%
 Taille du texte 
font-weight
 
bold, normal, 300, 700, 900
 Gras, normal ou épaisseur de la graisse 
font-style
 
italic, oblique, normal
 Italique 
text-decoration
 
underline, overline,
line-through, blink, none
 Soulignement, ligne au-dessus, barré ou clignotant 
font-variant
 
small-caps, normal
 Petites capitales 
text-transform
 
capitalize, lowercase, uppercase
 Capitales 
font
 
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder
16px/3 cursive;
 Super propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family… 
text-align
 
left, center, right, justify
 Alignement horizontal 
vertical-align
Alignement vertical (cellules de tableau ou éléments inline-block uniquement) 
line-height
 
18px, 120%, normal...
 Hauteur de ligne 
text-indent
 
25px
 Alinéa 
white-space
 
pre, nowrap, normal
 Césure 
word-wrap
 
break-word, normal
 Césure forcée 
text-shadow
 
5px 5px 2px blue

(horizontale, verticale, fondu, couleur)

 Ombre de texte

Couleurs et fonds

Propriété Valeurs (exemples) Description 
color
 
#FFF
rgb(255, 255, 255)
rgba(255, 255, 255, 0.5)
hsl ou hsla(0, 50%, 50%, 0.5)
Exemple pour le blanc. la valeur a est l'opacité. HSL pour Teinte, Saturation et Luminosité. 
background-color
 
id color
 Couleur de fond 
background-image
 
url(localisation du fichier image)
 Image de fond 
background-attachment
 
fixed, scroll
 fixe ou défilant 
background-repeat
 
repeat-x, repeat-y, repeat, no-repeat
 Répétition du fond 
background-position
 
/* Valeurs utilisant un mot-clé */
background-position: (top, bottom, left, right, center)
/* Valeurs proportionnelles à la boîte */
background-position: 25% 75%;
/* Valeurs de longueur */
background-position: 10px 20px;
 Position du fond 
background
 
/* On utilise une couleur <background-color> */
background: green;
/* Ici, une <bg-image> avec <repeat-style> */
background: url("test.jpg") repeat-y;
/* Là <box> et <background-color> */
background: border-box red;
/* Ici on utilise une seule image, centrée 
et remise à l'échelle */
background: no-repeat center/80%
url("../img/image.png");
 Super propriété de fond 
opacity
 
opacity: 0.5;
 Opacité

Propriétés des boîtes

Propriété Valeurs (exemples) Description 
width
 
150px, 80%;
Largeur 
height
 
150px, 80%;
 Hauteur 
min-width
 
150px, 80%;
 Largeur minimale 
max-width
 
150px, 80%;
 Largeur maximale 
min-height
 
150px, 80%;
 Hauteur minimale 
max-height
 
150px, 80%;
 Hauteur maximale 
margin-top
 
150px, 80%;
 Marge en haut 
margin-left
 
150px, 80%;
 Marge à gauche 
margin-right
 
23px
 Marge à droite 
margin-bottom
 
23px;
 Marge en bas 
margin
 
23px 5px 23px 5px;

(haut, droite, bas, gauche)

Super-propriété de marge.

Combine : margin-top, margin-right, margin-bottom, margin-left.

 
padding-left
 
23px;
 Marge intérieure à gauche 
padding-right
 
23px;
 Marge intérieure à droite 
padding-bottom
 
23px;
 Marge intérieure en bas 
padding-top
 
23px;
 Marge intérieure en haut 
padding
 
23px 5px 23px 5px;

(haut, droite, bas, gauche)

Super-propriété de marge intérieure.

Combine : padding-top, padding-right, padding-bottom, padding-left.

 
border-width
 
23px;
 Épaisseur de bordure 
border-color
 nom, rgb(rouge,vert,bleu),rgba(rouge,vert,bleu,transparence), #CF1A20... Couleur de bordure 
border-style
 
solid, dotted, dashed,
double, groove,
ridge, inset, outset;
 Type de bordure 
border
 
3px solid black;

Super-propriété de bordure. Combine border-width, border-color, border-style.

Existe aussi en version border-top, border-right, border-bottom, border-left.

 
border-radius
 
5px;
 Bordure arrondie 
box-shadow
 
6px 6px 0px black;

(horizontale, verticale, fondu, couleur)

 Ombre de boîte 
background-clip
 
border-box; padding-box; content-box;
text;
 Limitation du fond dans la boîte. Sous la bordure, dans le contenu y compris le padding, dans le contenu, dans le texte.

Propriétés de positionnement et d'affichage

Propriété Valeurs (exemples) Description 
display
 
block, inline, inline-block,
 table, table-cell, none;
 Type d'élément (block, inline, inline-block, none…) 
visibility
 
visible, hidden;
 Visibilité 
clip
 
rect (0px, 60px, 30px, 0px);
 Affichage d'une partie de l'élément 
overflow
 
auto, scroll, visible, hidden;
 Comportement en cas de dépassement 
float
 
left, right, none;
 Flottant 
clear
 
left, right, both, none;
 Arrêt d'un flottant 
position
 
relative, absolute, static;
 Positionnement 
top
 
20px;
 Position par rapport au haut 
bottom
 
20px;
 Position par rapport au bas 
left
 
20px;
 Position par rapport à la gauche 
right
 
20px;
 Position par rapport à la droite 
z-index
 
10;

Ordre d'affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres.

Propriétés des listes

Propriété Valeurs (exemples) Description 
list-style-type
 
disc, circle, square, decimal,
lower-roman, upper-roman,
lower-alpha, upper-alpha, none;
 Type de liste 
list-style-position
 
inside, outside;
 Position en retrait 
list-style-image
 
url('puce.png');
 Puce personnalisée 
list-style
 - Super-propriété de liste. Combine list-style-type, list-style-position, list-style-image.

Propriétés des tableaux

Propriété Valeurs (exemples) Description 
border-collapse
 
collapse, separate;
 Fusion des bordures 
empty-cells
 
hide, show;
 Affichage des cellules vides 
caption-side
 
bottom, top;
 Position du titre du tableau

Autres propriétés

Propriété Valeurs (exemples) Description 
cursor
 
crosshair, default, help, move,
pointer, progress, text,
wait, e-resize, ne-resize, auto;
 Curseur de souris