Crear varias clases en HTML

1. Asignar varias clases a un contenedor en HTML
2. Asignar varias clases a un contenedor en HTML para escribir CSS eficiente

Este artículo presentará cómo crear varias clases en HTML. El artículo discutirá los beneficios de usar múltiples clases en HTML.

Asignar varias clases a un contenedor en HTML

En HTML, a menudo hemos visto una clase asignada a un contenedor. Podemos asignar una clase en los elementos HTML con el atributo clase y luego escribir el valor. Podemos crear una clase a nivel de bloque y elementos en línea. Podemos crear clases para las diferentes etiquetas HTML como <img>, <p>, <h1> y muchas más. Generalmente, podemos crear un contenedor y asignarle una clase, y darle estilo al contenedor con CSS. Podemos seleccionar la clase de contenedor con el . Selector de CSS. Veamos un ejemplo de ello.

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

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

Hemos creado un elemento div con una clase box en el ejemplo anterior. Tenemos algunos contenidos dentro del div. En CSS, seleccionamos la clase box y le aplicamos algunos estilos. Creamos una caja con algo de altura y ancho. Tiene un borde negro.

También podemos asignar dos clases a un contenedor en HTML. Para eso, debemos escribir los dos nombres de las clases, uno tras otro separados por espacios en blanco. Luego, podemos diseñar las clases que contienen el mismo contenedor individualmente.

Por ejemplo, cree un div como se muestra en el ejemplo anterior. Escriba las dos clases box y wrapper separados por espacios en blanco para el div. En CSS, seleccione primero la clase box y escriba la propiedad borde. Dé el valor como 2px solid black para la propiedad border. Luego, dé la altura y el ancho de 200px. A continuación, seleccione la clase wrapper y asigne el valor de 20px a la propiedad margin.

Agregamos un margen de 20px al contenedor usando dos clases en el siguiente ejemplo.

Código de ejemplo:

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

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

.wrapper{
    margin:20px;
}

Asignar varias clases a un contenedor en HTML para escribir CSS eficiente

Aprendimos cómo podíamos usar varias clases en un contenedor. Ahora, debemos comprender el beneficio de seguir este enfoque. Podemos usar varias clases en un contenedor cuando algunas clases tienen atributos idénticos. Podemos diseñar las clases comunes una vez y diseñar las clases individuales por separado. Por lo tanto, podemos escribir el CSS de manera eficiente.

Por ejemplo, cree tres elementos div en HTML. Para cada uno de los elementos, escriba box como primer nombre de clase. Luego, escriba los nombres de clase redBox para el primer div, greenBox para el segundo y blueBox para el tercer div. A continuación, en CSS, seleccione la clase box y proporcione la altura y el ancho de 200px. Establezca el margen de 20px. Ahora, seleccione el nombre de la clase individual y proporcione el color de fondo respectivo. Seleccione la clase redBox y establezca la propiedad background-color en red. Repita lo mismo para las clases restantes con los colores respectivos como color de fondo.

En el siguiente ejemplo, identificamos los atributos comunes de estas tres cajas y creamos una clase común box. Debido a esto, no necesitamos escribir los estilos repetitivos para cada una de las casillas. También asignamos los contenedores con las clases individuales, a través de las cuales podemos diseñar las cajas con colores únicos. De esta manera, podemos usar múltiples clases para escribir códigos CSS eficientes.

Código de ejemplo:

<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;
}