Guide Complet du CSS – Français

1. Couleurs et fonds

Propriété	Valeurs possibles	Fonction
color	noms, #hex, rgb(), rgba(), hsl()	Couleur du texte
background-color	noms, #hex, rgb(), rgba(), hsl()	Couleur de fond
background-image	url("image.png"), none	Image de fond
background-repeat	repeat, no-repeat, repeat-x, repeat-y	Répétition de l’image
background-size	auto, cover, contain, 100px 50px	Taille de l’image
background-position	left top, center, right bottom	Position de l’image
background-attachment	scroll, fixed, local	Comportement au défilement
background-clip	border-box, padding-box, content-box	Zone du fond

2. Texte

Propriété	Valeurs possibles	Fonction
font-family	"Arial", sans-serif	Police d’écriture
font-size	px, em, rem, %	Taille du texte
font-weight	normal, bold, 100–900	Épaisseur du texte
text-align	left, center, right, justify	Alignement du texte
text-decoration	none, underline, line-through	Ligne(s) de texte
text-transform	uppercase, lowercase, capitalize	Transformation de casse
line-height	1.5, 20px, 150%	Hauteur de ligne
letter-spacing	2px, normal	Espacement entre lettres
text-shadow	2px 2px 5px black	Ombre sur le texte

3. Boîte et dimensions

Propriété	Valeurs possibles	Fonction
width / height	px, %, auto, vw/vh	Dimensions
margin	auto, px, %	Marge extérieure
padding	px, %	Marge intérieure
border	1px solid black	Bordure
border-radius	10px, 50%	Coins arrondis
box-shadow	2px 2px 5px grey	Ombre portée
box-sizing	content-box, border-box	Calcul de la taille

4. Positionnement et affichage

Propriété	Valeurs possibles	Fonction
display	block, inline, flex, grid, none	Type d’affichage
position	static, relative, absolute, fixed, sticky	Positionnement
top / left / right / bottom	px, %	Position précise
z-index	nombre	Ordre de superposition
overflow	visible, hidden, scroll, auto	Gestion du débordement
opacity	0 à 1	Transparence

5. Flexbox

Propriété	Valeurs possibles	Fonction
display	flex, inline-flex	Active le mode flex
flex-direction	row, column	Direction principale
justify-content	center, space-between...	Alignement horizontal
align-items	center, stretch...	Alignement vertical
gap	10px	Espace entre éléments
flex-wrap	nowrap, wrap	Retour à la ligne
align-content	stretch, space-around...	Alignement lignes multiples

6. Grid

Propriété	Valeurs possibles	Fonction
display	grid, inline-grid	Active la grille
grid-template-columns	repeat(3, 1fr)	Colonnes
grid-template-rows	auto, 100px	Lignes
gap	10px	Espace entre cellules
justify-items	start, end, center	Alignement horizontal
align-items	start, end, center	Alignement vertical
grid-area	nom ou ligne/colonne	Zone de grille

7. Transitions et animations

Propriété	Valeurs possibles	Fonction
transition	property duration ease	Transition fluide
animation-name	nom	Nom de l’animation
animation-duration	2s, 500ms	Durée
animation-iteration-count	infinite, nombre	Répétition
animation-direction	normal, reverse, alternate	Direction
animation-timing-function	ease, linear, ease-in-out	Vitesse

8. Transform et curseur

Propriété	Valeurs possibles	Fonction
transform	translate(), rotate(), scale()	Transformations 2D/3D
transform-origin	center, top left	Point d’origine
cursor	pointer, default, move, wait	Style du curseur

9. Pseudo-classes et pseudo-éléments

Type	Exemples	Fonction
Pseudo-classes	:hover, :focus, :active, :nth-child()	État d’un élément
Pseudo-éléments	::before, ::after, ::first-letter	Partie virtuelle de l’élément

10. Autres propriétés utiles

Propriété	Valeurs possibles	Fonction
visibility	visible, hidden	Affichage sans retirer l’espace
clip-path	circle(), polygon()	Découper une forme
filter	blur(), brightness()	Effets visuels

11. Listes

Propriété	Valeurs	Fonction
list-style-type	disc, circle, none	Style des puces
list-style-image	url("image.png")	Image de puce
list-style-position	inside, outside	Position des puces

12. Tableaux

Propriété	Valeurs	Fonction
border-collapse	collapse, separate	Fusion des bordures
border-spacing	10px	Espacement des cellules
caption-side	top, bottom	Position du titre

13. Media Queries (Responsive)

Syntaxe	Exemple	Fonction
@media	@media (max-width: 768px) { ... }	Styles selon l’écran
@supports	@supports (display: grid) { ... }	Condition de support

14. Flexibilité avancée et utilitaires

Propriété	Valeurs	Fonction
object-fit	cover, contain	Redimensionnement image/vidéo
object-position	center, top, left	Position du média
mix-blend-mode	multiply, screen	Mode de fusion

15. Gestion des images et médias

Propriété	Valeurs	Fonction
max-width	100%	Empêche le dépassement
height	auto	Maintient le ratio
aspect-ratio	16/9, 1/1	Proportion fixe

16. Scroll et défilement

Propriété	Valeurs	Fonction
scroll-behavior	smooth, auto	Défilement fluide
scroll-snap-type	x mandatory	Accrochage du scroll
overflow-y	scroll, hidden	Gestion du scroll vertical

17. Variables CSS

Syntaxe	Exemple	Fonction
Déclaration	:root { --couleur: #3498db; }	Définit une variable
Utilisation	color: var(--couleur);	Réutilisation

18. Gradients (Dégradés)

Type	Exemple	Fonction
Linéaire	linear-gradient(to right, red, blue)	Dégradé en ligne
Radial	radial-gradient(circle, yellow, green)	Dégradé circulaire
Conique	conic-gradient(from 90deg, red, blue)	Dégradé conique