La principale différence entre le dièse et le point, en CSS, réside dans les faits suivants :
- Un dièse fait référence un ID, et donc à un élément unique.
- Un point fait référence une CLASS, et donc potentiellement à plusieurs éléments.
- Une déclaration CSS sans dièse, ni point, fait référence à toutes les balises concernées.
Voici quelques exemples pour mieux comprendre la différence entre le dièse et le point en CSS :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Quelle est la différence entre le dièse (#) et le point (.) en CSS ?</title>
<style>
#noir {
color : black;
}
.rouge {
color : red;
}
p {
color : blue;
}
</style>
</head>
<body>
<div class="rouge">Un texte en rouge en raison de la CLASS (rouge).</div>
<div class="rouge">Un autre texte en rouge en raison de la même CLASS (rouge).</div>
<div id="noir">Un texte en noir en raison de son ID (noir).</div>
<p>Un texte en bleu du fait qu'il soit dans une balise P.</p>
</body>
</html>
Privilégiez ainsi l'utilisation des CLASS lorsque vous voulez appliquer une règle CSS à plusieurs éléments; et l'ID lorsque vous appliquez une règle CSS à un seul élément HTML.
Il est à noter que l'attribut universel CLASS accepte différentes valeurs. Dans l'exemple ci-dessous la balise HTML <p> se voit attribuer deux CLASS nommées rouge et gras pour respectivement mettre le texte en rouge et en gras :
<style>
.rouge {
color : red;
}
.gras {
font-weight: bold;
}
</style>
<p class="rouge gras">Un texte en rouge et en gras</p>
Vous ne pouvez par contre pas attribuer plusieurs ID à un même élément HTML.
Rappel : Un ID doit être unique, une page HTML ne doit jamais contenir deux ou plus d'ID identiques.
