Les différence principale entre id et class en CSS est que le id est utilisé pour appliquer un style à un élément unique tandis que la classe est utilisée pour appliquer un style à plusieurs éléments.

Il existe différentes technologies dans le développement Web. Les principaux langages de développement de sites Web sont HTML, CSS et JavaScript. HTML signifie Hyper Text Markup Language. Il aide à développer la structure de la page Web. JavaScript aide à rendre la page Web plus dynamique. CSS signifie feuilles de style en cascade. Cela aide à ajouter des styles et à rendre les pages Web plus présentables. Les règles CSS s'appliquent aux éléments HTML. De plus, les sélecteurs CSS aident à trouver les éléments et à appliquer le style requis aux balises HTML. id et class sont deux types de sélecteurs.

Classe, Règles CSS, ID

Que sont les règles CSS

CSS se compose d'un ensemble de règles. Le navigateur peut interpréter ces règles et les appliquer aux éléments spécifiés dans le document. Une règle de style CSS se compose de trois sections. Ils sont le sélecteur, la propriété et la valeur. La déclaration fait référence à la combinaison de la propriété et de la valeur. Ils apparaissent à l'intérieur d'une paire d'accolades comme suit.

sélecteur { propriété: valeur; }

Sélecteur – Aide à identifier l'élément pour appliquer le style

Biens – Un attribut. Tous les attributs HTML sont convertis en propriétés CSS. Certains exemples sont la couleur, l'alignement du texte, la bordure, etc.

Valeur – La valeur est ce qui est attribué à la propriété. Par exemple, le bleu peut être attribué à la couleur de la propriété.

Qu'est-ce que l'identifiant

Le programmeur peut définir une règle de style basée sur l'identifiant des éléments. Tous les éléments avec le même identifiant seront appliqués avec le style défini. Pour sélectionner un élément avec un identifiant spécifique, il doit y avoir un symbole # (dièse) suivi de l'identifiant de l'élément.

Supposons que le fichier HTML contienne une instruction comme suit.

Le fichier CSS contient le morceau de code suivant.

#header1{

Couleur bleue;

}

Lorsque le navigateur interprète l'instruction HTML, il vérifie l'ID de l'élément h1, qui est header1 dans le fichier CSS. Ensuite, il applique la règle CSS définie à l'élément h1. Par conséquent, le texte Hello World apparaîtra en bleu.

L'identifiant est unique dans la page. Par conséquent, le sélecteur id est utilisé pour un élément unique.

Qu'est-ce que la classe

Semblable à l'id, le programmeur peut définir les règles de style en fonction de la classe de l'élément. Tous les éléments de même classe seront appliqués avec un style défini. Pour sélectionner un élément avec une classe spécifique, il doit y avoir un fichier. (point) suivi du nom de la classe.

Supposons que le fichier HTML contienne les instructions suivantes.

Le fichier CSS contient le morceau de code suivant.

.header1{

Couleur bleue;

}

Lorsque le navigateur interprète l'instruction HTML, il vérifie la classe de l'élément h1, qui est header1 dans le fichier CSS. Ensuite, il applique la règle CSS définie à tous les éléments h1. Par conséquent, les textes Hello World 1 et Hello World 2 apparaîtront en bleu.

Il est possible d'utiliser la même classe sur plusieurs éléments. Par conséquent, le sélecteur de classe est utilisé pour plusieurs éléments.

Différence entre l'identifiant et la classe en CSS

Définition

id est un sélecteur en CSS qui stylise l'élément avec un identifiant spécifié tandis que classe est un sélecteur en CSS qui stylise les éléments sélectionnés avec une classe spécifiée.

Syntaxe

La syntaxe de l'id est #id{ déclarations css; }. La syntaxe de classe est.class { déclarations css; }

Usage

De plus, l'utilisation de id est d'appliquer un style à un élément spécifique. L'utilisation de la classe est d'appliquer un style à plusieurs éléments.

Conclusion

L'id et la classe sont deux sélecteurs en CSS qui permettent d'appliquer un style aux éléments HTML. La principale différence entre id et class en CSS est que id est utilisé pour appliquer un style à un élément unique tandis que class est utilisé pour appliquer un style à plusieurs éléments.

Référence:

1. "Syntaxe CSS et sélecteurs". Tutoriels Web en ligne W3Schools, disponibles ici.

Image de courtoisie:

1. "CSS.3" de Nikotaf - Travail personnel (CC BY-SA 4.0) via Commons Wikimedia