Identifiant et classe CSS
Dans notre chapitre précédent, nous avons appris à propos de sélecteurs. Nous allons maintenant parler des sélecteurs id et class fréquemment utilisés pour styliser les éléments de page Web.
Sélecteur CSS id
Sélecteur ID est un identifiant unique de l'élément HTML auquel un style spécifique doit être appliqué. Il est utilisé si un seul élément HTML de la page Web doit avoir un style spécifique.
Tant dans les Feuilles de style interne et externe, on utilise (#) pour le sélecteur id.
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>Le premier paragraphe.</p>
<p id="blue">Le deuxième paragraphe.</p>
<p>Le troisième paragraphe.</p>
</body>
</html>Comme vous le voyez, nous avons assigné blue comme sélecteur d’identité du deuxième paragraphe (id="blue"), et déclaré son style à l’aide de la propriété color- #blue {color: #1c87c9;} dans la séction <head>. Cela signifie que l'élément HTML avec le sélecteur id bleu sera affiché dans #1c87c9.
Vérifiez ce code dans notre éditeur HTML en ligne pour vous assurer que la couleur du deuxième paragraphe est #1c87c9.
Sélecteur CSS class
Sélecteur class est utilisé lorsque le même style doit être appliqué à plusieurs éléments HTML sur la même page Web.
Tant des feuilles de style interne et externe, on utilise point (.) pour le sélecteur class.
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">Un titre.</h2>
<p>Le deuxième paragraphe.</p>
<p class="blue">Le troisième paragraphe.</p>
</body>
</html>Dans notre exemple, le sélecteur est utilisé deux fois, dans titre et dans paragraphe.
Comme vous le voyez, nous avons assigné blue comme le sélecteur class (class="blue"), et a déclaré son style en utilisant la propriété color - .blue {color: #1c87c9;} dans la séction <head>. Cela sognifie que les éléments avec sélecteur bleu class seront affichés dans #1c87c9.
Dans notre exemple, le titre et le troisième paragraphe sont #1c87c9. Vérifiez ce code dans notre éditeur HTML en ligne.
Pratiquez vos connaissances
