Pour éviter la répétition du code, nous utilisons plusieurs classes dans HTML et CSS. Avec CSS, nous pouvons également définir et styliser les deux classes ensemble et utiliser plusieurs classes dans un élément en leur affectant différents ID de classe. Cette approche peut être suivie en utilisant la syntaxe séparée par l'espace pour ajouter plusieurs classes à un élément HTML.

Dans cet article, nous apprendrons à ajouter plusieurs classes à un élément.

Comment utiliser plusieurs classes dans CSS?

Pour utiliser deux classes ou plus dans un élément, chaque ID de classe sera séparé par un espace.

Vous devez suivre la syntaxe suivante pour utiliser plusieurs classes dans un élément:

remettre…

Dans un seul élément HTML, vous pouvez inclure plus d'une classe en les séparant avec un espace. Pour votre commodité, voici un exemple.

Exemple: en utilisant plusieurs classes dans CSS

Dans l'exemple ci-dessous, nous créerons:

• Une rubrique utilisant le

  Tag et attribuez le nom de classe "titre".

• Ensuite, nous créerons un autre titre et le affecterons à deux classes différentes: «titre" et "doubler". Ces identifiants de classe sont séparés par un espace:

Html

Plusieurs classes dans un élément

Maintenant, passons au fichier CSS et appliquons certaines propriétés CSS énumérées ci-dessous:

• Définissez la couleur d'arrière-plan sur l'en-tête à l'aide de la fonction RVB () comme «(69, 51, 151)".
• Réglez le style de police "italique"Pour le titre.

Dans la classe HTML, le premier titre utilise le nom de classe «titre". Ainsi, le style spécifié dans la classe spécifiée sera implémenté sur le premier titre:

.En-tête
Color en arrière-plan: RVB (69, 51, 151);
Style de police: italique

Pour le "doubler«Classe, nous avons:

• Définissez la couleur de la rubrique à l'aide de la fonction RVB () comme «(255, 0, 0)".
• Appliquer la ligne de textes-décoration comme «souligner".

Le deuxième titre utilisera les styles des deux classes: «titre" et "doubler" classe:

.doubler
Couleur: RVB (255, 0, 0);
Text-décoration-ligne: soulignement;

Après la mise en œuvre, vérifiez le résultat:

De la sortie, vous pouvez observer que le deuxième titre utilise les deux classes CSS.

Conclusion

Pour utiliser plusieurs classes sur un seul élément, utilisez différentes ID de classe séparées par des espaces blancs. En utilisant cela, nous pouvons appliquer différentes propriétés CSS à la fois. Il nous permet de réutiliser la classe où des éléments similaires existent. Cet article a expliqué comment utiliser plusieurs classes en un seul élément et le style avec un exemple.