Nous l'avons brièvement vu : il y a trois manières d'identifier une balise en CSS. Par son type (ça affectera toutes les balises de ce type), par sa classe (ça affectera toutes les balises de cette classe) et par son ID (ça n'affectera que cette balise, car par définition l'ID d'une balise est unique).
Nous ne reviendrons pas sur la manière d'attribuer un effet de style à une balise par son type, nous venons de le voir et franchement c'est très facile.
Par contre nous verrons maintenant comment le faire spécifiquement pour une classe et pour un ID. Pour le moment nous ne nous intéresseront qu'au cas des classes, mais sachez que pour les ID c'est exactement pareil. La seule différence étant que vous pouvez utiliser la même classe sur deux balises différentes tandis qu'un ID doit rester uniquement attribué à une seule balise.
Avant de mettre en forme une balise en fonction de son attribut de classe, il faut le lui donner cet attribut de classe.
Pour donner une classe à une balise on utilise l'attribut "class" (pour l'ID c'est "id").
Voici un exemple : <h2 class="maclasse">titre</h2>
Nous avons donc donné à la balise H2 la classe "maclasse".
Maintenant imaginons que nous sommes sur une page HTML avec non pas une mais trois titres H2, et que nous voulons que les deux premiers soient écrits en rouge souligné, mais que la dernière soit laissée normale.
Nous attribuerons donc aux deux premiers titres la classe "maclasse", ou tout autre nom que vous voulez lui donner.
Maintenant allons dans le fichier CSS et ajoutons ce code :
Je précise juste que "text-decoration: underline;" c'est pour avoir du souligné en utilisant CSS.
Bon comme vous l'avez remarqué, vos titres de la classe "maclasse" sont maintenant en rouge et en souligné.
Qu'est-ce que l'on a fait concrètement ? On a dit à CSS de mettre les titres de la classe "maclasse" en souligné.
Seulement les titres ? Non. N'importe quelle balise avec l'attribut "maclasse" sera en rouge et en souligné, mais en l'occurrence dans mon exemple les seules balises que j'utilise sont les balises de titres.
Remarquez également qu'en CSS lorsque l'on veut identifier une classe on met un point devant. On a donc ".maclasse" dans le fichier CSS.
Vous pouvez faire exactement la même chose avec l'attribut ID, mais gardez deux choses à l'esprit.
Premièrement un ID ne s'emploie que sur une seule balise à la fois, deuxièmement que ce n'est plus un point "." qu'il faut mettre dans le fichier CSS mais un dièse "#".