Inspecter l'onglet Styles

Objectifs de la leçon

• Comprendre Inspecter l'onglet Styles dans une vraie boucle CSS.
• Ecrire une règle courte et lisible.
• Verifier rendu, responsive et focus avant de continuer.

Pourquoi cette étape existe

Crée une surcharge visible sur la carte héro afin que DevTools montre la bordure de base et la déclaration active plus spécifique.

CSS devient fiable quand chaque règle répond à un problème visible : lisibilité, espace, contraste, mise en page ou état interactif.

Méthode de travail

Commence par nommer l'intention, cible le plus petit composant utile, puis ajoute une declaration courte.

Observe ensuite le rendu dans le navigateur et l'onglet Styles des DevTools avant d'ajouter une autre règle.

Piege frequent

Changer des valeurs au hasard peut donner un joli résultat une fois, mais ne prouve ni contraste, ni responsive, ni focus.

Une correction CSS doit rester explicable quand le contenu devient plus long ou quand l'écran change.

Vocabulaire lié

• sélecteur — Partie de la règle qui choisit les éléments styles.
• declaration — Couple propriété/valeur qui produit un effet.
• cascade — Mecanisme qui decide quelle règle s'applique.
• DevTools — Outils du navigateur pour inspecter les styles actifs.

Validation

• Je peux expliquer l'intention de la règle.
• Je vérifie le rendu dans le navigateur.
• Je garde le focus et le responsive visibles.