Les propriétés CSS les plus utiles
Le langage compte des centaines de propriétés. Une trentaine suffit à construire la quasi-totalité des interfaces. Voici lesquelles, ce qu’elles font réellement, et les pièges qui coûtent le plus de temps.
Le texte
C’est la première chose que lit un visiteur, et la dernière que l’on règle correctement. Quatre propriétés portent l’essentiel de la lisibilité : la taille, la graisse, l’interlignage et la longueur de ligne.
color
La couleur du texte. Elle est héritée par les éléments enfants, ce qui permet de la poser une fois sur un conteneur.
color: #8e66f1;
color: rgb(142 102 241 / 60%);font-size
La taille du texte. En rem, elle reste relative au réglage du navigateur, donc respectueuse des personnes qui ont augmenté la taille par défaut. La fonction clamp() borne une taille fluide entre un minimum et un maximum.
font-size: 1rem;
font-size: clamp(1.5rem, 4vw, 3rem);font-weight
La graisse. Les valeurs numériques sont plus précises que les mots-clés, et une fonte variable accepte toutes les valeurs intermédiaires.
font-weight: 400;
font-weight: 700;
font-weight: 550;line-height
L’interlignage. Sans unité, il se calcule à partir de la taille du texte et reste juste quand celle-ci change — c’est presque toujours la forme à préférer.
line-height: 1.6;
line-height: 1.15; /* titres */text-align
L’alignement horizontal. Le texte justifié creuse des rivières blanches sur les colonnes étroites : à éviter sur mobile.
text-align: left;
text-align: center;text-decoration
Le soulignement et le barré. Retirer le soulignement d’un lien dans un paragraphe supprime le seul indice qui le distingue pour beaucoup de lecteurs.
text-decoration: underline;
text-decoration: line-through;text-wrap
La façon dont les lignes se coupent. La valeur balance répartit les mots d’un titre court sur des lignes de longueur voisine ; pretty évite les mots seuls en fin de paragraphe.
text-wrap: balance;
text-wrap: pretty;La boîte : dimensions, marges, bordures
Tout élément est une boîte faite d’un contenu, d’un remplissage intérieur, d’une bordure et d’une marge extérieure. La déclaration qui suit vaut d’être posée une fois pour toutes : elle fait que la largeur demandée est la largeur obtenue, bordure et remplissage compris.
*, *::before, *::after { box-sizing: border-box; }width / height
Les dimensions. Une hauteur fixe finit toujours par couper un texte plus long que prévu : laisser le contenu décider, et borner avec min-height ou max-width.
width: 100%;
max-width: 65ch;
min-height: 100svh;padding
Le remplissage intérieur, entre le contenu et la bordure. Les valeurs se lisent dans le sens des aiguilles d’une montre à partir du haut.
padding: 16px;
padding: 16px 24px;
padding-block: 16px;margin
La marge extérieure. Deux marges verticales voisines fusionnent au lieu de s’additionner — surprise classique, que l’usage de gap dans un conteneur flex ou grid évite entièrement.
margin: 0 auto;
margin-top: 24px;border
La bordure : épaisseur, style, couleur. Elle occupe de la place et participe donc à la largeur totale.
border: 1px solid rgb(255 255 255 / 12%);
border-bottom: 2px solid #ffbf0f;border-radius
L’arrondi des angles. En pourcentage sur un carré, il produit un cercle.
border-radius: 10px;
border-radius: 50%;background
L’arrière-plan : couleur, image ou dégradé, éventuellement superposés du premier au dernier plan.
background: #0d0d12;
background: linear-gradient(180deg, #1a1a24, #0d0d12);aspect-ratio
Le rapport largeur/hauteur. Sur une image ou une vidéo, il réserve la place avant le chargement et évite que la page ne saute au moment où le média arrive.
aspect-ratio: 16 / 9;
aspect-ratio: 1;Position, empilement et débordement
Ces quatre propriétés décident de la place qu’un élément occupe, de ce qui passe devant et de ce qui dépasse. Ce sont aussi celles qui produisent les bugs les plus longs à diagnostiquer, parce que leur effet dépend du parent.
position
relative laisse l’élément dans le flux et sert surtout de repère aux enfants. absolute le sort du flux et le positionne par rapport au premier parent positionné. fixed le fixe par rapport à la fenêtre, sticky le laisse suivre puis se bloquer.
position: relative;
position: absolute;
position: sticky;inset
Le décalage d’un élément positionné, en une seule déclaration plutôt que top, right, bottom et left séparés.
inset: 0;
inset: auto auto 16px 16px;z-index
L’ordre d’empilement. Il n’agit que sur un élément positionné, et uniquement au sein de son contexte d’empilement : une valeur très élevée ne fait pas passer un enfant devant un autre parent. Rester sur une échelle courte et documentée.
position: relative;
z-index: 10;overflow
Le sort du contenu qui dépasse. Réserver auto au conteneur d’un tableau ou d’un bloc de code large, pour que la page elle-même ne défile jamais horizontalement.
overflow: hidden;
overflow-x: auto;Disposer : flex et grid
La règle courte : flex distribue des éléments sur une seule ligne ou colonne et laisse leurs tailles s’adapter ; grid pose une trame de lignes et de colonnes et y place le contenu. Une barre de navigation relève du premier, une galerie de cartes du second.
Dans les deux cas, gap remplace les marges pour espacer les enfants — sans fusion de marges, sans marge en trop sur le dernier élément.
display
Le mode de disposition. none retire l’élément de l’affichage et de l’ordre de lecture, mais pas du HTML — un menu masqué ainsi reste dans le document.
display: flex;
display: grid;
display: none;gap
L’espace entre les enfants d’un conteneur flex ou grid. Deux valeurs séparent l’espacement vertical de l’horizontal.
gap: 16px;
gap: 24px 16px;justify-content / align-items
La répartition le long de l’axe principal, et l’alignement sur l’axe perpendiculaire. En flex horizontal, le premier agit à l’horizontale et le second à la verticale ; passer en column les échange.
justify-content: space-between;
align-items: center;flex
La façon dont un enfant occupe l’espace restant : capacité à grandir, à rétrécir, taille de base. La valeur 1 laisse les enfants se partager la place à parts égales.
flex: 1;
flex: 0 0 240px;grid-template-columns
Les colonnes de la trame. L’unité fr représente une fraction de l’espace disponible ; la forme auto-fit avec minmax produit une grille qui se réorganise seule, sans point de rupture à écrire.
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));Les effets et le mouvement
Le dernier groupe règle ce qui bouge et ce qui répond au curseur. Deux principes : n’animer que transform et opacity, les seules propriétés que le navigateur traite sans recalculer la mise en page ; et respecter les personnes qui ont demandé moins d’animation, ce que fait la requête ci-dessous.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}transition
Le passage progressif d’un état à un autre : propriété visée, durée, courbe. Nommer la propriété plutôt qu’utiliser all évite d’animer par accident ce qui vient d’être ajouté.
transition: opacity .2s ease-out;
transition: transform .3s cubic-bezier(.2, .8, .2, 1);transform
Déplacer, redimensionner ou faire pivoter sans déranger la mise en page voisine. C’est la propriété à privilégier pour tout mouvement.
transform: translateY(-4px);
transform: scale(1.03) rotate(2deg);opacity
La transparence, de 0 à 1. Elle s’applique à l’élément entier, enfants compris : superposer vingt formes à faible opacité donne une masse opaque, pas un voile.
opacity: 1;
opacity: .5;box-shadow
Une ombre portée : décalage horizontal, vertical, flou, puis couleur. Une couleur transparente donne un résultat plus juste qu’un gris plein.
box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);cursor
L’apparence du curseur au survol. La valeur pointer signale ce qui est cliquable ; ne pas la poser sur ce qui ne l’est pas.
cursor: pointer;
cursor: not-allowed;pointer-events
La réaction à la souris. La valeur none laisse passer le curseur au travers — utile pour un calque décoratif posé au-dessus d’un contenu cliquable.
pointer-events: none;
pointer-events: auto;Les points qui restent à trancher
Faut-il connaître toutes les propriétés CSS ?
Non. La trentaine réunie ici couvre la très grande majorité des interfaces. Le reste s’apprend au cas par cas, quand un besoin précis se présente — c’est plus efficace que d’essayer de retenir une liste exhaustive.
px, rem, em ou pourcentage ?
rem pour les tailles de texte et les espacements, parce qu’il suit le réglage du navigateur ; px pour les détails qui ne doivent pas bouger, comme l’épaisseur d’une bordure ; les pourcentages et fr pour les largeurs dans une mise en page ; ch pour borner une longueur de ligne.
Flex ou grid ?
Flex quand les éléments se suivent sur un axe et que leur taille dépend de leur contenu : une barre de navigation, une rangée de boutons. Grid quand la trame existe indépendamment du contenu : une galerie, un tableau de bord, une page en colonnes.
Comment éviter d’écrire !important ?
En vérifiant d’abord l’ordre de chargement des feuilles, puis en visant la classe du composant plutôt qu’une longue chaîne de sélecteurs. Une déclaration prioritaire reste acceptable pour neutraliser un style en ligne posé par un outil tiers, avec un commentaire qui explique ce qu’elle contourne.
Confronter le guide à un projet réel.
Quelques lignes suffisent : contexte, contrainte principale et résultat attendu.