• Home
  • CSS – Intermédiaire

CSS – Intermédiaire

  • Course level: Intermédiaire

Description

Les attributs HTML class et id et les sélecteurs CSS associés

Cette leçon est consacrée à la découverte et à l’utilisation des attributs HTML class et id.
Nous pourrons ajouter ces deux attributs à n’importe quel élément HTML.
Ces deux attributs sont spéciaux en HTML car ils n’ont pas été créés pour spécifier le comportement d’un élément HTML particulier, mais seront principalement utilisés pour cibler certains HTML et leur appliquer des styles en CSS.

Présentation des attributs HTML class et id et cas d’utilisation

Les attributs HTML id et class sont des attributs globaux parce que nous allons pouvoir les ajouter dans la balise ouvrante de n’importe quel élément HTML.
Ces deux attributs vont principalement être utilisés pour de la mise en forme : ils vont nous servir à appliquer des styles CSS aux éléments qui vont les contenir.
Effectivement, à la différence d’un attribut href par exemple, les attributs id et class ne serviront pas à préciser le fonctionnement d’un élément HTML mais seront simplement utilisés pour cibler un élément précis.
Nous pourrons très facilement nous resservir de ces deux attributs en CSS grâce aux sélecteurs associés #id et .class.

Premier exemple d’utilisation des attributs HTML class et id et des sélecteurs CSS associés

Jetons un regard réel sur le fonctionnement des .class et des .id, et comment nous pouvons les utiliser en CSS pour cibler et appliquer des styles spécifiques d’éléments sélectionnés.
Pour cela, nous allons créer une page HTML et placer les attributs class et id dans différents éléments.
Nous devrons entrer une valeur pour chaque class et id.
Les valeurs spécifiées pour les attributs ne doivent pas contenir de caractères spéciaux ni d’espaces et commencer par une lettre.
En pratique, nous essaierons d’attribuer les valeurs qui composent nos différentes propriétés.
Notez que chaque identifiant doit avoir une valeur ou être unique dans une page.
En revanche, nous pourrons attribuer la même valeur à plusieurs propriétés de classe différentes.

Ici, nous ajoutons un attribut id = “orange” à la balise de notre élément h1 et un attribut id = “gros” au dernier paragraphe.
On ajoute également le même attribut class=”bleu” à nos deux premiers paragraphes et 1 attribut class=”vert” à un seul élément de notre liste.
Ensuite, on va lier les styles CSS à ces différents id et class en utilisant les sélecteurs CSS qui vont biens.
Pour pointer un id en particulier en CSS, on utilise le symbole dièse suivi de la valeur de l’id auquel on souhaite lier les styles.
Pour pointer une class en particulier en CSS, on utilise le symbole “point” suivi de la valeur de la class à laquelle on souhaite lier les styles.

Class vs id : Quelles différences et quel attribut utiliser ?

Il existe une différence notable entre les deux attributs class et id : chaque id doit avoir une valeur unique dans une même page tandis que plusieurs attributs class peuvent partager la même valeur.
Cela signifie que l’attribut id est beaucoup plus spécifique que la propriété class, et que ces deux propriétés auront des rôles et des objectifs différents, en particulier pour l’implémentation en CSS.

Utilisation de classes en HTML et CSS

Nous utilisons donc souvent des propriétés de classe pour définir le style et les points communs de plusieurs éléments d’une même page.
Puisque nous pouvons fournir la même classe pour certains d’entre eux, ils hériteront tous du même type sauf en cas de collision.

Toute la puissance des attributs class et du sélecteur CSS associé va résider dans le fait qu’on va tout à fait pouvoir définir des styles CSS généraux liés à des sélecteurs .class avant même de commencer à écrire notre code HTML.
Ensuite, nous devrons simplement fournir des attributs de classe pour nos éléments HTML lors de la création
L’idée est la suivante: créer des styles et les attacher. Le sélecteur de classe spécifie d’abord les propriétés de classe liées à certains éléments HTML afin que les styles CSS correspondants leur soient appliqués.
Cette façon de procéder peut sembler étrange et “à l’envers” pour les personnes non expertes.
Cependant, je vous garantis que c’est un très bon outil qui peut faire gagner beaucoup de temps sur un grand projet.
C’est aussi toute l’idée derrière l’utilisation de Bootstrap, par exemple.

Utilisation des id en HTML et en CSS

D’autre part, puisque chaque identifiant doit être unique dans la page, nous utiliserons ce sélecteur pour appliquer des styles spécifiques et garantir uniquement le HTML de destination dans le CSS.
C’est la raison pour laquelle nous utilisons id pour créer le lien du type d’ancrage par exemple.
En effet, nous sommes sûrs de lever toute ambiguïté sur la sélection avec un id car encore une fois celui-ci doit être unique.
Par conséquent, les sélecteurs CSS .class et #id n’ont pas le même degré de précision et n’ont donc pas la même priorité dans les styles spécifiés en cas de conflit.
Je vous rappelle ici qu’en cas de conflits de style en CSS, le style de sélecteur plus précis sera appliqué.
L’ordre de priorité d’application des styles dans CSS est le suivant:

  1. Les styles liés à un sélecteur #id
  2. Les styles liés à un sélecteur .class.
  3. Les styles liés à un sélecteur élément

Plus d’exemples d’utilisation des attributs class et id en HTML et des sélecteurs CSS associés

Tout d’abord, rappelez-vous que les valeurs spécifiées pour la classe et l’id ne peuvent pas contenir d’espaces de caractères pleins et commencent par une lettre.
Pour le mieux, nous essaierons d’utiliser des noms pour nos attributs class et id.
Par exemple, nous pouvons utiliser les noms liés aux CSS spécifiés avec les sélecteurs associés.
Faites bien attention cependant à ne pas utiliser des noms protégés c’est-à-dire des noms déjà utilisés par le HTML et qui ont déjà une signification spéciale.
Attribuer un attribut class et un attribut id à un élément HTML On peut tout à fait fournir plusieurs attributs à un élément HTML et notamment un attribut class et un attribut id à un élément.
Prenons l’exemple précédent en ajoutant une propriété de classe au dernier paragraphe pour illustrer ceci :

Ici, le dernier paragraphe de notre page a à la fois les attributs class = “bleu” et id = “gros”.
Par conséquent, les styles CSS associés à ces deux propriétés sont appliqués à l’élément.
Ici, nos deux propriétés class = “bleu” et id = “gros” sont utilisées pour appliquer différentes propriétés CSS.
Il n’y a donc aucun risque de conflit.
En revanche, il y aura des conflits si nous spécifions des comportements différents pour la même propriété avec deux sélecteurs.
Un point sur la préférence des styles Imaginons maintenant que nous passions une propriété de classe et un id au même élément et que nous définissions une propriété CSS différemment pour les ids et class.

Ici on passe un attribut class=”bleu” et id=”orange” à notre titre h1.
Cependant, nous définissons différemment le comportement de la même propriété dans les sélecteurs .bleu et #orange.
Il y a donc un conflit de style.
Comme vous pouvez le voir, notre en-tête est affiché ce qui signifie que les types associés à id seront pris en compte, non associés à la classe.
Vous pouvez ici conserver la règle suivante dans une application de style CSS: ce sera toujours le style de reliure de sélecteur le plus précis qui sera appliqué en cas de conflit.
Par ” précis “, on entend le sélecteur qui permet d’identifier le plus précisément l’élément auxquels vont être appliqués les styles.

Ici, puisque chaque id doit avoir une valeur unique pour une page, le sélecteur CSS est associé à notre id très exact et beaucoup plus précis que le sélecteur de la propriété de classe car il le permet. Je définis un seul élément tandis qu’un attribut de classe peut être partagé par des éléments et ne permet donc pas de définir un élément particulier.

Cette notion de précision peut vous sembler un peu floue pour le moment car c’est le genre de notion qu’il est difficile de comprendre sans connaitre l’ensemble du langage.
Ne vous inquiétez pas, tout cela deviendra plus clair à travers les leçons et avec chaque nouveau concept que nous allons aborder.

Attribuer plusieurs attributs de classe à un élément HTML

L’un des grands intérêts de l’attribut HTML class est qu’un même attribut va pouvoir être partagé par différents éléments.

Cela facilite grandement la gestion des styles de nos fichiers HTML et nous permet de gagner beaucoup de temps.
Inversement, le même élément HTML obtiendra des attributs différents.
Pour cela, il suffira d’indiquer différentes valeurs par un espace.

Par conséquent, une très bonne approche en CSS et pour créer des pages n’est pas de surcharger le sélecteur .class avec plusieurs styles CSS mais d’utiliser plusieurs sélecteurs. un comportement ou plusieurs attributs du même “type”.
Cela vous permet d’avoir plus de code et d’aller beaucoup plus vite dans la création d’un site.
Au lieu de cela, regardez l’exemple ci-dessous pour comprendre comment utiliser les propriétés de classe :

Notez que faire cela avec des attributs id n’a aucun sens car les styles des sélecteurs liés n’ont pas pour vocation d’être partagés entre plusieurs éléments différents (en sommes, étre « réutilisés ») mais sont liés à un élément spécifiquement. Il est donc logique, dans ce cas, de placer tous les styles voulus pour l’élément dans un seul id.

Sujets pour ce cours

3 Leçons

CSS – Intermédiaire

Ordre d’application (cascade) et héritage des règles en CSS
L’héritage en CSS
Conclusion sur les mécanismes de cascade et d’héritage en CSS

À propos du formateur/de la formatrice

0 (0 notations)

12 Cours

1 apprenants

Gratuit