Les classes et les identifiants (ID) en CSS

Tu veux que trois boutons choisis soient noirs, et qu'un bloc exceptionnel soit bleu. Le sélecteur button peindrait tous les boutons de la page, y compris ceux auxquels tu ne veux pas toucher. Il te faut des étiquettes pour les éléments choisis - et c'est exactement ce que sont les classes et les identifiants.

En HTML, chaque élément peut avoir divers attributs. Par exemple, l'élément image (img) requiert les attributs src et alt. Ces attributs définissent les propriétés des différents éléments. Lorsque les pages web ont une structure complexe, il devient nécessaire d'introduire un moyen d'identifier les différents objets. Il existe deux façons principales de distinguer les éléments HTML :

• L'attribut id - sert à distinguer de manière unique un élément précis.
• L'attribut class - permet de marquer un groupe d'éléments qui ont des caractéristiques communes.

Grâce à ces attributs, nous pouvons plus facilement gérer les éléments de la page, contrôler leur mise en forme et leur comportement. En Égypte, beaucoup portaient le titre de prêtre (c'est une classe), mais le nom de Ramsès II n'appartenait qu'à un seul pharaon (c'est un id).

Le sélecteur de classe - le point

Analysons le code. D'abord le HTML : trois boutons, qui portent chacun la même classe button-primary :

1<button class="button-primary">Bouton 1</button>
2<button class="button-primary">Bouton 2</button>
3<button class="button-primary">Bouton 3</button>

L'attribut class seul ne change encore rien à l'apparence - ce n'est qu'une étiquette. C'est dans le CSS que nous lui donnons un style :

1.button-primary {
2  background-color: #000;
3  border-radius: 5px;
4}

Nous avons créé trois boutons avec la classe button-primary - ils auront tous un fond noir et des coins arrondis de 5px. Le point qui précède « button-primary » dans le sélecteur .button-primary représente le sélecteur de classe. En HTML, tu écris le nom de la classe sans le point, et tu n'ajoutes le point que dans le CSS.

Le sélecteur d'identifiant - le dièse

Tu sélectionnes un identifiant avec le signe # (le dièse, en anglais hash) : un élément qui a l'attribut id="unique-element" se cible avec le sélecteur #unique-element. La valeur d'un id doit être unique dans tout le document. Les classes sont plus souples - un élément peut en avoir plusieurs, séparées par un espace, par exemple class="button-primary large". Les noms ne peuvent pas contenir d'espaces, et la casse compte : .Menu et .menu sont deux classes différentes.

Quel sélecteur l'emporte ?

Et si un paragraphe a à la fois une classe et un id, et que chaque sélecteur lui donne une couleur différente ? C'est l'id qui gagne : un identifiant est plus fort qu'une classe, et une classe est plus forte qu'un nom de balise. Vérifie-le dans l'éditeur ci-dessous - décommente la règle #special et regarde le premier paragraphe devenir rouge :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Cascade et spécificité CSS</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>La hiérarchie des styles en CSS</h1>
10
11    <p id="special" class="text">Ce texte a un ID et une classe</p>
12    <p class="text">Ce texte n'a qu'une classe</p>
13    <p>Ce texte n'a ni ID ni classe</p>
14
15    <!-- Expérimente avec la spécificité : -->
16    <!-- Quel sélecteur l'emporte ? élément, .classe ou #id ? -->
17</body>
18</html>

Tu découvriras les règles complètes de cette rivalité dans la leçon sur la cascade et la spécificité. Mon conseil : pour la mise en forme, utilise surtout des classes, car un identifiant est si fort qu'il devient ensuite difficile de le remplacer.

Exercice : classe et identifiant en CSS

Dans cet exercice, tu apprendras à utiliser les attributs class et id pour mettre en forme des éléments HTML. Ta tâche consistera à créer une page web avec divers éléments, qui seront mis en forme à l'aide de classes et d'identifiants CSS.

Étape 1 : Crée la structure de base d'un document HTML

D'abord, crée un nouveau fichier HTML et ajoute la structure de base d'un document HTML. Ajoute des éléments <button> avec une classe et un <div> avec un identifiant.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Classe et id en CSS</title>
8</head>
9<body>
10  <button class="button-primary">Bouton 1</button>
11  <button class="button-primary">Bouton 2</button>
12  <button class="button-primary">Bouton 3</button>
13  <div id="unique-element">Élément unique</div>
14</body>
15</html>

L'élément <link> dans la section head relie le fichier externe styles.css - sans lui, le navigateur ne saurait même pas que des styles existent.

Étape 2 : Crée un fichier CSS

Ouvre ou crée un nouveau fichier CSS et enregistre-le sous le nom styles.css, dans le même dossier que le fichier HTML.

Étape 3 : Mets en forme la classe

Ajoute un style pour les éléments qui ont la classe .button-primary, en réglant la couleur de fond sur noir et en arrondissant les coins. Cette fois, nous ajoutons aussi un texte blanc, car par défaut le texte d'un bouton est sombre :

1.button-primary {
2  background-color: #000;
3  color: #fff;
4  border: none;
5  border-radius: 5px;
6  padding: 10px 20px;
7  cursor: pointer;
8}

La déclaration border: none supprime la bordure par défaut du bouton, et cursor: pointer transforme la flèche de la souris en main.

Étape 4 : Mets en forme l'identifiant

Ajoute un style pour l'élément qui a l'identifiant #unique-element, en réglant la couleur de fond sur bleu, la couleur du texte sur blanc, ainsi que les espacements.

1#unique-element {
2  background-color: #00f;
3  color: #fff;
4  padding: 20px;
5  margin-top: 20px;
6  text-align: center;
7}

Cette règle n'atteindra qu'un seul élément, car aucun autre ne peut avoir le même id. La propriété text-align: center centre le texte horizontalement.

Résultat

Une fois toutes les étapes terminées, tes fichiers HTML et CSS devraient ressembler à ceci.

Fichier HTML (index.html)

Le fichier HTML n'a pas changé depuis l'étape 1, car toutes les étiquettes class et id y figuraient dès le départ :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Classe et id en CSS</title>
8</head>
9<body>
10  <button class="button-primary">Bouton 1</button>
11  <button class="button-primary">Bouton 2</button>
12  <button class="button-primary">Bouton 3</button>
13  <div id="unique-element">Élément unique</div>
14</body>
15</html>

Fichier CSS (styles.css)

Dans le fichier CSS, les deux règles se suivent, séparées par une ligne vide, pour qu'il soit facile de distinguer le style de la classe de celui de l'identifiant :

1.button-primary {
2  background-color: #000;
3  color: #fff;
4  border: none;
5  border-radius: 5px;
6  padding: 10px 20px;
7  cursor: pointer;
8}
9
10#unique-element {
11  background-color: #00f;
12  color: #fff;
13  padding: 20px;
14  margin-top: 20px;
15  text-align: center;
16}

Pour aller plus loin

1. Ajoute d'autres éléments avec différentes classes et différents identifiants pour mieux comprendre comment fonctionnent ces attributs.
2. Essaie d'ajouter davantage de styles à ta page, par exemple en changeant la couleur du texte, en ajoutant des bordures ou des ombres.
3. Teste tes compétences en créant des mises en page plus complexes à l'aide de classes et d'identifiants.

Après avoir terminé cet exercice, tu devrais mieux comprendre comment utiliser les classes et les identifiants en CSS pour mettre en forme les éléments HTML. Retiens : une classe est un titre que de nombreux prêtres peuvent porter, et un id est le nom d'un pharaon - unique dans tout le royaume.