Anatomie d'une règle CSS

Une règle CSS suit toujours la même logique :

Structure de base :

selecteur {
  propriete: valeur;
}

Exemple :

h1 {
  color: #1d4ed8;
  font-size: 2rem;
}

Un stylesheet est une suite de règles combinées. En additionnant des règles simples, on construit des interfaces complètes.

La prochaine étape est de comprendre quels éléments cibler avec les sélecteurs.

A retenir

Une règle CSS est toujours une relation : "je cible tel élément" -> "je lui applique telle propriété" -> "avec telle valeur". Ce schéma est universel, quel que soit le framework utilisé ensuite.

Mini pratique

Écris 3 règles très simples (couleur, taille, marge) sur trois éléments différents. L'objectif est juste d'entraîner la lecture sélecteur/propriété/valeur.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.