Ressource

Principales propriétés CSS

colorDéfinit la couleur du texte ; Couleurs CSS. Exemple : color: red;

background-colorDéfinit la couleur d'arrière-plan ; Couleurs CSS. Exemple : background-color: blue;

font-sizeDéfinit la taille de la police ; px, em, %. Exemple : font-size: 16px;

font-familyDéfinit la famille de polices ; Noms de polices. Exemple : font-family: Arial;

font-weightDéfinit la graisse de la police ; normal, bold, bolder, lighter, 100-900. Exemple : font-weight: bold;

font-styleDéfinit le style de la police ; normal, italic, oblique. Exemple : font-style: italic;

line-heightHauteur de ligne ; px, em, normal. Exemple : line-height: 1.5;

text-alignAlignement du texte ; left, right, center, justify. Exemple : text-align: center;

letter-spacingEspacement des caractères ; normal, <length>. Exemple : letter-spacing: 0.1em;

marginEspacement extérieur ; px, em, %. Exemple : margin: 10px;

paddingEspacement intérieur ; px, em, %. Exemple : padding: 10px;

borderDéfinit la bordure ; Style, largeur, couleur. Exemple : border: 1px solid black;

widthLargeur de l'élément ; px, %, auto. Exemple : width: 100px;

heightHauteur de l'élément ; px, %, auto. Exemple : height: 100px;

displayMode d'affichage ; block, inline, flex, grid. Exemple : display: block;

positionPositionnement de l'élément ; static, relative, absolute, fixed, sticky. Exemple : position: relative;

z-indexOrdre de superposition ; Un nombre entier. Exemple : z-index: 1;

opacityTransparence de l'élément ; 0 à 1. Exemple : opacity: 0.5;

overflowGère le contenu débordant ; visible, hidden, scroll, auto. Exemple : overflow: hidden;

Notes

Couleurs CSS

En CSS, vous pouvez spécifier des couleurs de plusieurs manières :

Noms de couleurs prédéfinis : comme red, blue, green, etc.
Notation HEX : comme #FF0000 pour le rouge.
Notation RGB/RGBA : comme rgb(255,0,0) pour le rouge ou rgba(255,0,0,0.5) pour un rouge semi-transparent.
Notation HSL/HSLA : permet de définir les couleurs en utilisant les valeurs de teinte, de saturation et de luminosité.

px (pixels)

C'est une unité fixe et qui ne change pas en fonction de la taille de la fenêtre ou de l'écran.

em

Cette unité est relative à la taille de la police du parent le plus proche ayant une taille de police définie. Par exemple, si la taille de la police parente est de 16px, alors 1em équivaudra à 16px.

%

Une unité relative qui dépend de la taille de l'élément parent. Si la largeur de l'élément parent est de 500px, alors un élément enfant avec une largeur de 50% aura une largeur de 250px.

vw/vh

proportion du viewport width/height

Valeurs de `display`

block

L'élément prend toute la largeur disponible et crée un saut de ligne avant et après lui. Exemples typiques : <div>, <p>.

inline

L'élément n'entraîne pas de saut de ligne et prend seulement la largeur nécessaire pour son contenu. Exemples : <span>, <a>.

inline-block

Se comporte comme un élément inline, mais vous pouvez lui appliquer des propriétés de bloc comme la hauteur et la largeur.

flex

L'élément devient un conteneur flexible et ses enfants deviennent des éléments flexibles. C'est utile pour des mises en page complexes et alignements d'éléments.

grid

Transforme l'élément en un conteneur de grille.

none

L'élément est complètement retiré du flux du document. Il n'est pas visible et n'occupe aucun espace.

Valeurs de `position`

static

C'est la valeur par défaut. L'élément est positionné selon le flux normal du document. Les propriétés top, right, bottom et left n'ont aucun effet.

relative

L'élément est positionné selon le flux normal, mais vous pouvez le déplacer par rapport à sa position initiale en utilisant les propriétés top, right, bottom, et left.

absolute

L'élément est retiré du flux normal et positionné par rapport à son conteneur parent le plus proche en position relative, absolute, ou fixed. Utilisez top, right, bottom, et left pour le positionner.

fixed

L'élément est retiré du flux normal et positionné par rapport au viewport. Il reste à la même place même lorsque la page est défilée.

sticky

C'est un mélange entre relative et fixed. L'élément est positionné relativement jusqu'à ce qu'il atteigne un certain point de défilement, après quoi il se comporte comme un élément fixed.