¿Qué es una clase CSS?

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 de CSS a varias etiquetas HTML según los requisitos de diseño. Ahora surge la pregunta, ¿qué hacemos en una situación así? Aquí es donde entraron las clases de CSS para salvarnos de escribir el mismo código CSS varias veces. La clase CSS es el jugador clave para agregar múltiples propiedades a un elemento o a toda la página web. Teniendo en cuenta la importancia de enseñar CSS, este artículo tiene como objetivo proporcionar una idea de cómo enseñar CSS con los siguientes resultados de aprendizaje:

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

Contenidos

¿Qué es una clase CSS?

En CSS, la clase se usa para definir un conjunto de propiedades para aplicar las propiedades de CSS de forma masiva. Una clase puede ser utilizada por múltiples etiquetas HTML al mismo tiempo, lo que significa que no tenemos que escribir las mismas propiedades CSS varias veces en nuestro código HTML, sino usar la clase en su lugar. Una clase se define con el conjunto de propiedades CSS. La sintaxis general de la clase CSS se proporciona a continuación: .classname{Propiedades CSS} En CSS, un punto (.) se usa para especificar un nombre de clase y las propiedades CSS se encierran entre llaves.

Cómo crear una clase CSS

El uso principal de la clase CSS es encapsular un conjunto de propiedades CSS y luego aplicar esas propiedades llamando a la clase. El siguiente código explica cómo crear clases CSS.

clases de css

clase CSS

Este es el primer párrafo del tutorial de clase.

Este es el segundo párrafo del tutorial de la clase.

En el ejemplo anterior creamos tres clases CSS, Envase, centro y Color. Estas clases están cada una en las etiquetas.
,

y

aplicado.
producción

En la clase de contenedor de salida anterior, especifica la altura y el ancho del contenedor, también se establece un borde, mientras que la clase de color cambia el color de la fuente y la clase central centra el texto.

Cómo usar múltiples clases para una sola etiqueta HTML

En CSS, podemos usar múltiples clases para una sola etiqueta HTML, lo que ayuda a que HTML sea más eficiente. El siguiente ejemplo ilustra mejor este concepto. html lang=»en»> head> meta charset=»UTF-8″> meta http-equiv=»X-UA-compatible» content=»IE=edge»> meta name=»viewport» content=»width=device -width, initial-scale=1.0″> title>CSS Classes/title> style> .container{ height: 200px; Ancho: 500 px; borde: 2px negro sólido; } .center{ texto-alinear: centro; } .size{ tamaño de fuente: 20px; } .color{ color: coral; } .text-style{ Familia de fuentes: Arial, Helvetica, sans serif; } /style> /head> body> div class=»container»> h1 class=»center»>CSS class/h1> p class=»size»>Este es el primer párrafo del tutorial de clase/p> p class= » text-style»>Este es el segundo párrafo del tutorial de clase/p> p class=»center size color text-style»>Este es el tercer párrafo del tutorial de clase/p> /div> / body> /html > Se crean cinco clases CSS encima del código. Que Envase La clase mirará eso.

-Etiqueta aplicada mientras las cuatro clases restantes en el

-Se aplican etiquetas. Además, cuatro clases CSS diferentes se asignan a un solo

día (último
producción

En el resultado anterior, el tercer párrafo se muestra con varias clases de CSS aplicadas 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 a una etiqueta específica cada vez que se usa. El siguiente ejemplo te ayudará a entenderlo mejor.
ejemplo

html lang=»en»> head> meta charset=»UTF-8″> meta http-equiv=»X-UA-compatible» content=»IE=edge»> meta name=»viewport» content=»width=device -width, initial-scale=1.0″> title>CSS Classes/title> style> .container{ height: 200px; Ancho: 500 px; borde: 2px negro sólido; } .center{ texto-alinear: centro; } .size{ tamaño de fuente: 20px; } p.color{ color: coral; } .text-style{ Familia de fuentes: Arial, Helvetica, sans serif; } /style> /head> body> div class=»container»> h1 class=»center»>CSS class/h1> span class=»color»>Este es el primer párrafo dentro de la etiqueta span/span> p class es escrito=»text-style»>Este es el segundo párrafo del tutorial de clase/p> p class=»color»>Este es el tercer párrafo del tutorial de clase/p> /div> /body> /html> En este ejemplo creamos una clase de color específicamente para

etiquetar y aplicar día también

.
producción

El resultado anterior muestra claramente que solo se ha editado la clase de color

etiqueta porque fue creada específicamente para eso

Señal.

Conclusión

En CSS, la clase es un atributo que se usa para aplicar varias propiedades CSS a las etiquetas HTML. Una sola clase CSS se puede aplicar a varias etiquetas HTML y viceversa. El punto (.El símbolo ) identifica una clase CSS. En este artículo aprendimos sobre las clases CSS, cómo usar varias clases CSS para una sola etiqueta HTML y clases CSS para etiquetas HTML específicas. Además, varias etiquetas pueden usar la misma clase CSS al mismo tiempo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.