Mémo des propriétés CSS

Il existe plus de 200 propriétés CSS-3, l’idée de cette page n’est pas de toutes les listées, certaines ne sont pas encore totalement reconnues par les navigateurs, et d’autres simplement peu utilisées. Il s’agit donc plus d’un petit rappel des propriétés vues en cours, d’autres articles suivrons pour des propriétés ou des fonctionnalités spécifiques.

Les propriétés de texte

Règle CSS	Exemple de valeurs	Utilisation
font-family	police1, police2, police3, serif, sans-serif, monospace	Famille de typographie.
font-size	Valeur en px, %, em, vh, vw	Corps de la police.
font-weight	bold, normal	Graisse de la typographie.
text-transform	capitalize, lowercase, uppercase	Permet de passer le texte en capitale.
letter-spacing	Valeur en px, %, em, vh, vw	Interlettrage de la typographie.
text-align	right, left, center	Alignement du texte.
text-decoration	underline, overline, line-through, blink, none	Décoration sur la typographie (souligné, barré…)
text-indent	Valeur en px, %, em, vh, vw	Alinéa de la première ligne de texte.
line-height	Valeur en px, %, em, vh, vw	Interlignage de la typographie.
font-style	italic, normal	Affiche le texte en italic.

Les propriétés de liste

Règle CSS	Exemple de valeurs	Utilisation
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(‘mes-images/puce.png’)	Personnalisation de l’élément « puce » de la liste.

Les couleur et d’arrière plan

Règle CSS	Exemple de valeurs	Utilisation
color	nom de la couleur, valeur hexadécimale, valeur rgb, valeur rgba, valeur hsl	Couleur du texte.
background-color	nom de la couleur, valeur hexadécimale, valeur rgb, valeur rgba, valeur hsl	Couleur d’arrière plan.
background-image	url(mon-dossier/mon-image.jpg)	Image d’arrière plan.
background-repeat	repeat, repeat-x, repeat-y, no-repeat	Répétition de l’image d’arrière plan.
background-position	center, left/right, top/bottom, x, y	Positionnement de l’image d’arrière plan dans l’élément HTML.
background-size	cover, contain, 100%	Taille de l’image d’arrière plan.
opacity	valeur comprise entre 0 & 1	Opacité de l’élément HTML.

Il existe une « super propriété » css permettant de regrouper plusieurs propriété en une seule :
background : [background-color] [background-image] [background-repeat] [background-position] / [background-size]
exemple : background:#cccccc url(mon-dossier/monimage.jpg) no-repeat center center/cover;

Les bordures

Règle CSS	Exemple de valeurs	Utilisation
border-width	Valeur en px, %, em, vh, vw	Épaisseur de la bordure.
border-color	nom de la couleur, valeur hexadécimale, valeur rgb, valeur rgba, valeur hsl	Couleur de la bordure.
border-style	solid, dotted, dashed, double, groove, ridge, inset, outset	Style graphique de la bordure.
border-radius	1px, 1em…	Bord arrondi

Il existe une « super propriété » css permettant de regrouper plusieurs propriété en une seule :
border : [border-style] [border-width] [border-color]
exemple : border:solid 1px #000000;
Il existe également la possibilité de cibler une bordure spécifique :
border-top, border-right, border-bottom, border-left
exemple : border-bottom: solid 1px #000000

Les propriétés de blocs

Règle CSS	Exemple de valeurs	Utilisation
width	Valeur en px, %, em, vh, vw	Largeur de l’élément.
height	Valeur en px, %, em, vh, vw	Hauteur de l’élément.
max-width	Valeur en px, %, em, vh, vw	Largeur maximum de l’élément
max-height	Valeur en px, %, em, vh, vw	Hauteur maximum de l’élément

margin-top	Valeur en px, %, em, vh, vw	Marge extérieur en haut.
margin-right	Valeur en px, %, em, vh, vw	Marge extérieur à droite.
margin-bottom	Valeur en px, %, em, vh, vw	Marge extérieur en bas.
margin-left	Valeur en px, %, em, vh, vw	Marge extérieur à gauche.

padding-top	Valeur en px, %, em, vh, vw	Marge intérieur en haut.
padding-right	Valeur en px, %, em, vh, vw	Marge intérieur à droite.
padding-bottom	Valeur en px, %, em, vh, vw	Marge intérieur en bas.
padding-left	Valeur en px, %, em, vh, vw	Marge intérieur à gauche.

Positionnement et affichage

Règle CSS	Exemple de valeurs	Utilisation
display	block, inline, inline-block, flex, table, table-cell, none…	Type d’élément
visibility	visible, hidden	Affichage 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	auto, scroll, visible, hidden	Comportement en cas de dépassement
float	left, right, none	Flottement de l’élément (utile pour faire un habillage autour d’une image)
clear	left, right, both, none	Arrêt d’un flottement
position	relative, absolute, fixed, static	Type de positionnement de l’élément par rapport à un repère (lui même, son premier parent positionné, la fenêtre, sa place dans le flux)
top	Valeur en px, %, em, vh, vw	Position par rapport au haut du repère
right	Valeur en px, %, em, vh, vw	Position par rapport à la droite du repère
bottom	Valeur en px, %, em, vh, vw	Position par rapport au bas du repère
left	Valeur en px, %, em, vh, vw	Position par rapport à la gauche du repère
z-index	Valeur numérique entière	Ordre d’affichage de l’élément sur la profondeur

Bonus

Pour aller plus loin et retrouver l’ensemble des propriétés CSS, leurs effets, leur compatibilité le tout en français, rendez-vous sur la page du site de la fondation Mozilla MDN Web Doc entièrement dédiée aux propriétés CSS.