Para evitar la repetición del código, utilizamos múltiples clases en HTML y CSS. Con CSS, también podemos definir y diseñar ambas clases juntas y usar múltiples clases en un elemento asignándoles diferentes ID de clase. Este enfoque puede seguirse utilizando la sintaxis separada por el espacio para agregar varias clases a un elemento HTML.

En este artículo, aprenderemos cómo agregar varias clases a un elemento.

Cómo usar múltiples clases en CSS?

Para usar dos o más clases en un elemento, cada ID de clase estará separada por un espacio.

Debe seguir la siguiente sintaxis para usar varias clases en un elemento:

entregando ..

En un solo elemento HTML, puede incluir más de una clase separándolos con un espacio. Para su conveniencia, aquí hay un ejemplo.

Ejemplo: Uso de múltiples clases en CSS

En el siguiente ejemplo, crearemos:

• Un encabezado usando el

  etiqueta y asigne el nombre de clase "título".

• A continuación, crearemos otro encabezado y lo asignaremos a dos clases diferentes: "título" y "línea". Estas ID de clase están separadas por un espacio:

Html

Múltiples clases en un elemento

Ahora, pasemos al archivo CSS y apliquemos algunas propiedades de CSS enumeradas a continuación:

• Establezca el color de fondo en el encabezado utilizando la función rgb () como "(69, 51, 151)".
• Establezca el estilo de fuente "itálico"Para el encabezado.

En la clase HTML, el primer encabezado utiliza el nombre de la clase "título". Por lo tanto, el estilo especificado en la clase especificada se implementará en el primer encabezado:

.título
Color de fondo: RGB (69, 51, 151);
estilo de fuente: cursiva

Para el "línea"Clase, tenemos:

• Establezca el color del encabezado usando la función rgb () como "(255, 0, 0)".
• Aplicar la línea de decoración de texto como "subrayar".

El segundo encabezado utilizará los estilos de ambas clases: "título" y "línea" clase:

.línea
Color: RGB (255, 0, 0);
TEXT-DECORACIÓN-línea: subrayado;

Después de la implementación, consulte el resultado:

Desde la salida, puede observar que el segundo encabezado utiliza ambas clases de CSS.

Conclusión

Para usar múltiples clases en un solo elemento, use diferentes ID de clase separadas por espacios blancos. Usando esto, podemos aplicar diferentes propiedades de CSS a la vez. Nos permite reutilizar la clase donde existen elementos similares. Este artículo explicó cómo usar múltiples clases en un solo elemento y peinarlo junto con un ejemplo.