Identifiant, classe☘

Les balises génériques en Html et les sélecteurs de balises en Css permettent de distinguer des balises de même nature (des paragraphes par exemple) qui n'ont pas la même « finalité » (par exemple, un paragraphe pour les explications et un paragraphe pour les exemples).

Balises universelles <div> et <span>☘

Parfois, il n'existe pas de balise Html spécifique qui corresponde à ce dont on a besoin. On utilise alors une balise générique dotée de l'attribut classou de l'attribut id (cf. les paragraphes suivants).

  • La balise <div> est de type block.

  • La balise <span> est de type inline.

Dans le fichier Css, c'est l'appel au nom de la classe ou bien au nom de l'identifiant qui permettra de mettre en valeur le contenu de ces balises.

Sélecteurs d'éléments - Rappel☘

Une règle Css telle que : 

1
2
3
p {
    color: darkblue;
    }
concernera tous les éléments de type paragraphe.
On peut ainsi facilement définir des comportements « par défaut » pour les éléments essentiels d'une page.

Sélecteurs de classe☘

Il peut exister plusieurs types de paragraphes dans une page web. Pour les distinguer, il faut définir des groupes de balises à l'aide de l'attribut class="...", où les pointillés sont à remplacer par le nom de classe de son choix.

Par exemple, voici comment écrire en vert des paragraphes correspondants aux énoncés d'exercices et en rouge le paragraphes correspondants aux corrections : 

1
2
3
4
5
6
7
8
<!-- Partie html -->
<p class="enonce">
    Un énoncé d'exercice.
</p>

<p class="correction">
    Une correction d'exercice
</p>

1
2
3
4
5
6
7
8
/* Partie css */
.enonce {               /* ne pas oublier le "." devant le nom de la classe */
    color: darkgreen;
    }

.correction {           /* ne pas oublier le "." devant le nom de la classe */
    color: red;
    }

Sélecteurs d'identifiant☘

On peut aussi désigner un élément unique dans une page avec l'attribut id="...", où les pointillés sont à remplacer par le nom d'identifiant de son choix.
Cet élément sera unique dans la page, mais il sera généralement présent dans chaque page du site.

Par exemple, voici comment écrire en rouge le paragraphe de conclusion de la page :

1
2
3
4
<!-- Partie html -->
<p id="conclusion">
    Conclusion de la page.
</p>

1
2
3
4
/* Partie css */
#conclusion {           /* ne pas oublier le dièse "#" devant le nom de l'identifiant */
    color: red;
    }

Conclusion sur les sélecteurs☘

Les attributs de classe et/ou d'identifiant s'utilisent aussi (surtout) avec les balises génériques <div> et <span>. Une façon sympathique et efficace de faire le tour des sélecteurs est de traiter les situations proposées à cette adresse.
Prenez le temps de lire le cours qui se trouve à droite de la fenêtre dans chaque situation.

On trouvera également une liste exhaustive des sélections possibles sur cette page de w3schools.