Créer plusieurs classes en HTML

1. Attribuer plusieurs classes à un conteneur en HTML
2. Attribuer plusieurs classes à un conteneur en HTML pour écrire un CSS efficace

Cet article présentera comment créer plusieurs classes en HTML. L’article discutera des avantages de l’utilisation de plusieurs classes en HTML.

Attribuer plusieurs classes à un conteneur en HTML

En HTML, nous avons souvent vu une classe assignée à un conteneur. On peut affecter une classe dans les éléments HTML avec l’attribut class puis écrire la valeur. Nous pouvons créer une classe dans des éléments de niveau bloc et en ligne. Nous pouvons créer des classes pour les différentes balises HTML comme <img>, <p>, <h1> et bien d’autres. Généralement, nous pouvons créer un conteneur et lui attribuer une classe, et styliser le conteneur avec CSS. Nous pouvons sélectionner la classe du conteneur avec le . Sélecteur CSS. Voyons-en un exemple.

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

Nous avons créé un élément div avec une classe box dans l’exemple ci-dessus. Nous avons du contenu à l’intérieur du div. En CSS, nous avons sélectionné la classe box et lui avons appliqué quelques styles. Nous avons créé une boîte avec une certaine hauteur et largeur. Il a une bordure noire.

Nous pouvons également affecter deux classes à un conteneur en HTML. Pour cela, il faut écrire les deux noms des classes, l’un après l’autre séparés par des espaces. Ensuite, nous pouvons styliser individuellement les classes contenant le même conteneur.

Par exemple, créez un div comme indiqué dans l’exemple ci-dessus. Écrivez les deux classes box et wrapper séparées par des espaces pour le div. En CSS, sélectionnez d’abord la classe box et écrivez la propriété border. Donnez la valeur 2px solid black pour la propriété border. Ensuite, donnez la hauteur et la largeur de 200px. Ensuite, sélectionnez la classe wrapper et donnez la valeur 20px à la propriété margin.

Nous avons ajouté une marge de 20px au conteneur en utilisant deux classes dans l’exemple ci-dessous.

Exemple de code :

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

Attribuer plusieurs classes à un conteneur en HTML pour écrire un CSS efficace

Nous avons appris comment utiliser plusieurs classes dans un conteneur. Maintenant, nous devons comprendre l’avantage de suivre cette approche. Nous pouvons utiliser plusieurs classes dans un conteneur lorsque certaines classes ont des attributs identiques. Nous pouvons styliser les classes communes une fois et styliser les classes individuelles séparément. Ainsi, nous pouvons écrire le CSS efficacement.

Par exemple, créez trois éléments div en HTML. Pour chacun des éléments, écrivez box comme premier nom de classe. Ensuite, écrivez les noms de classe redBox pour le premier div, greenBox pour le second et blueBox pour le troisième div. Ensuite, en CSS, sélectionnez la classe box et indiquez la hauteur et la largeur de 200px. Définissez la marge de 20px. Maintenant, sélectionnez le nom de la classe individuelle et fournissez la couleur d’arrière-plan respective. Sélectionnez la classe redBox et définissez la propriété background-color sur red. Répétez la même chose pour les classes restantes avec les couleurs respectives comme couleur de fond.

Dans l’exemple ci-dessous, nous avons identifié les attributs communs de ces trois boîtes et créé une classe commune box. Pour cette raison, nous n’avons pas besoin d’écrire les styles répétitifs pour chacune des cases. Nous avons également attribué aux conteneurs des classes individuelles, grâce auxquelles nous pouvons styliser les boîtes avec des couleurs uniques. De cette façon, nous pouvons utiliser plusieurs classes pour écrire des codes CSS efficaces.

Exemple de code :

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}