01Une règle a deux parties
Un sélecteur désigne les éléments à styliser. Les déclarations entre accolades définissent les propriétés et leurs valeurs. Utilisez un fichier CSS commun pour les styles partagés entre pages.
/* styles.css */
p {
color: #333;
line-height: 1.7;
}
/* In your HTML head: */
/* <link rel="stylesheet" href="styles.css"> */02Les classes sont réutilisables
Une classe peut s’appliquer à plusieurs éléments. Choisissez des noms descriptifs comme .card ou .note plutôt que des noms liés à une couleur ou une position provisoire.
<article class="card">A project</article>
<style>
.card { padding: 24px; border: 1px solid #ddd; }
</style>03Comprendre la cascade
Quand plusieurs règles s’opposent, leur origine, l’importance, les couches et la spécificité entrent en jeu. À priorité égale, la dernière règle l’emporte. Inspectez les styles calculés avant d’ajouter !important partout.
.note { color: #555; }
.note { color: #222; } /* wins over the earlier equal rule */04À vous de jouer
Changez l’arrondi des coins et le padding, puis observez l’espace à l’intérieur de la carte.
HTML et CSS uniquement. Les scripts et l’envoi des formulaires sont désactivés.
Pour aller plus loin
Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.