anglais
français
arabe
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
Les fondamentaux du CSS
Passer le quiz
Les propriétés du quotidien
Vous savez comment se construit une règle. Voici les propriétés essentielles pour la couleur, le texte, le modèle de boîte et la mise en page.
Propriétés courantes
| Propriété | Ce qu’elle contrôle | Exemple |
|---|---|---|
color | Couleur du texte | color: #333; |
background | Couleur ou image de fond | background: #fff; |
font-size | Taille du texte | font-size: 16px; |
margin | Espace à l’extérieur | margin: 16px; |
padding | Espace à l’intérieur | padding: 8px; |
Le modèle de boîte
Chaque élément est une boîte : contenu, puis padding, puis bordure, puis marge. Le comprendre est la clé des espacements et des dimensions.
.card {
padding: 16px; /* interieur */
border: 1px solid #ddd;
margin: 12px; /* exterieur */
}Utilisez box-sizing: border-box
Cela fait inclure le padding et la bordure dans la width, pour des dimensions prévisibles. Souvent posé globalement : * { box-sizing: border-box; }
Mise en page moderne : Flexbox
Flexbox dispose les éléments en ligne ou en colonne avec un alignement facile — idéal pour les barres de navigation, les cartes et le centrage.
.row {
display: flex;
gap: 16px;
justify-content: space-between;
align-items: center;
}Évitez les pixels fixes partout
Préférez les unités relatives (rem, %, fr) et Flexbox/Grid pour que la mise en page s’adapte à tous les écrans.
Questions fréquentes
Quelle différence entre margin et padding ?
Flexbox ou Grid ?
px, em ou rem ?
rem pour les tailles de police et les espacements (proportionnel à la racine) ; px seulement pour une taille vraiment fixe.