anglais
français
arabe
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
CSS en pratique
Mise en ligne :
il y a 4 mois
Mise à jour :
il y a 4 mois
beginner
Passer le quiz
Passons au style, pour de vrai
Appliquez ce que vous avez appris : vous allez styliser une carte de profil de zéro et adopter un flux de travail propre et maintenable.
Projet : une carte de profil
- Écrivez le HTML : un conteneur avec une image, un nom et une courte bio.
- Liez une feuille de style externe et ajoutez une
classsur la carte. - Stylisez la boîte : padding,
border-radiuset une ombre subtile. - Utilisez Flexbox pour centrer la carte sur la page.
Le CSS
.card {
max-width: 320px;
margin: 40px auto;
padding: 24px;
border-radius: 14px;
background: #fff;
box-shadow: 0 6px 20px rgba(0,0,0,.08);
text-align: center;
}
.card img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
}Utilisez les DevTools du navigateur
Clic droit → Inspecter. Vous pouvez ajuster le CSS en direct et voir les changements instantanément avant de modifier votre fichier.
Bons réflexes vs erreurs courantes
| À faire ✓ | À éviter ✗ |
|---|---|
| Réutiliser des classes pour les styles répétés | Répéter les mêmes règles partout |
Utiliser rem / % / Flexbox / Grid | Coder des positions en pixels en dur |
| Garder une feuille de style externe | Disperser des attributs style en ligne |
Utiliser box-sizing: border-box | Se battre contre des largeurs inattendues |
Méfiez-vous de ceci
Une propriété mal orthographiée est ignorée en silence, une unité manquante (width: 100 au lieu de 100px) casse la mise en page, et abuser de !important rend le CSS ingérable.
Les détails ne sont pas les détails. Ils font le design.
Pourquoi mon CSS ne s’applique-t-il pas ?
Vérifiez le chemin du
<link>, cherchez une faute dans le sélecteur ou la propriété, et inspectez la spécificité — une règle plus spécifique l’emporte peut-être.Comment centrer un div ?
Avec Flexbox sur le parent :
display:flex; justify-content:center; align-items:center;.Et après le CSS ?
Le JavaScript — il rend votre page stylisée interactive.
