Como todos sabemos, HTML y CSS van de la mano para crear un diseño de sitio web receptivo y atractivo, pero a veces necesitamos aplicar las mismas propiedades CSS a múltiples etiquetas HTML de acuerdo con el requisito de diseño. Ahora surge la pregunta, ¿qué hacemos en tal situación?? Aquí vinieron las clases de CSS para evitar escribir el mismo código CSS varias veces.

La clase CSS es el reproductor clave para agregar múltiples propiedades a un elemento o a toda la página web. Teniendo en cuenta la importancia de la clase CSS, este artículo tiene como objetivo proporcionar una visión de la clase CSS con los siguientes resultados de aprendizaje:

• ¿Qué es una clase CSS?
• Cómo usar múltiples clases en una sola etiqueta HTML
• Clase CSS para etiqueta HTML específica

¿Qué es una clase CSS?

En CSS, la clase se usa para definir un conjunto de propiedades para aplicar las propiedades de CSS a granel. Una clase puede ser utilizada mediante múltiples etiquetas HTML a la vez, lo que significa que no necesitamos escribir las mismas propiedades CSS en nuestro código HTML varias veces, solo use la clase en su lugar. Una clase se define con el grupo de propiedades CSS. La sintaxis general de la clase CSS se proporciona a continuación:

.nombre de la clase
Propiedades CSS

En CSS, un punto (.) se usa para establecer un nombre de clase y las propiedades de CSS se encierran en aparatos ortopédicos.

Cómo crear una clase CSS

Principalmente, la clase CSS se utiliza para encerrar un conjunto de propiedades CSS y luego aplicar estas propiedades llamando a la clase. El siguiente código explica cómo se crean las clases CSS.

Clase CSS

Este es el primer párrafo para el tutorial de clase

Este es el segundo párrafo para el tutorial de clase

En el ejemplo anterior creamos tres clases CSS, envase, centro y color. Estas clases se aplican en el ,

, y

Etiquetas respectivamente.

Producción

En la clase de contenedor de salida anterior especifica la altura y el ancho del contenedor, también coloque un borde mientras la clase de color cambia el color de fuente y la clase central alinea el texto al centro.

Cómo usar múltiples clases en HTMLTAG único

En CSS, podemos usar múltiples clases en una sola etiqueta HTML que ayuda a diseñar HTML de manera más eficiente. El siguiente ejemplo demuestra este concepto mejor.

Clase CSS

Este es el primer párrafo para el tutorial de clase

Este es el segundo párrafo para el tutorial de clase

Este es el tercer párrafo para el tutorial de clase

En el código anterior, se crean cinco clases CSS. El envase La clase se aplica en la etiqueta, mientras que el resto de las cuatro clases se aplican en el

etiquetas. Además, se aplican cuatro clases de CSS diferentes en un solo

Etiqueta (último

Producción

En la salida anterior se muestra el tercer párrafo con la aplicación de múltiples clases de CSS a la vez.

Cómo usar clases en HTML

También podemos especificar una clase CSS para una etiqueta HTML específica. Este tipo de clase es útil cuando queremos aplicar el mismo estilo en una etiqueta específica cada vez que se usa. El siguiente ejemplo te ayuda a entender mejor.

Ejemplo

Clase CSS

Este es el primer párrafo está escrito dentro de la etiqueta de lapso

Este es el segundo párrafo para el tutorial de clase

Este es el tercer párrafo para el tutorial de clase

En este ejemplo, creamos una clase de color específicamente para

etiqueta y la aplicó en etiqueta tanto como

.

Producción

La salida anterior muestra claramente que la clase de color solo funcionó en

etiqueta porque se crea específicamente para

Conclusión

En CSS, la clase es un atributo que se utiliza para aplicar múltiples propiedades de CSS en etiquetas HTML. Se puede aplicar una sola clase CSS en múltiples etiquetas HTML y viceversa. El punto (.) El símbolo identifica una clase CSS. En este artículo, hemos aprendido sobre las clases de CSS, cómo usar múltiples clases de CSS en etiqueta HTML única y clase CSS para HTMLTAG específica. Además, la misma clase CSS puede ser utilizada por varias etiquetas a la vez.