class
hace referencia a un selector de clase, que se puede atribuir a todos los elementos de un HTML para luego aplicar estilos a los elementos marcados con esa clase usando hojas de estilo o CSS a través class selectors o usando Javascript a través de funciones Document.getElementsByClassName()
.
Es decir, que CSS trabaja junto con HTML, Javascript... y se puede combinar el uso de los tres.
La documentación de MDN dice lo siguiente:
En un documento HTML, los selectores de clase buscan un elemento
basado en el contenido de su atributo class. El atributo class está
definido como una lista de elementos separados por espacio, y uno de
esos elementos debe coincidir exactamente con el nombre de clase dado
en el selector.
class
pertenece a los atributos globales de HTML:
Los atributos globales son atributos comunes a todos los elementos
HTML; pueden usarse en todos los elementos, aunque pueden no tener
efecto en algunos de ellos.
Usando en un documento HTML etiquetas como class="nombre-clase"
, puedes modificar de forma automática, en pocas línea de código, el estilo de todos los elementos que tengan dicha clase usando CSS. Dichas modificaciones pueden hacerse también usando Javascript.
La ventaja, aparte de poderlos alcanzar todos desde el mismo lugar (CSS), tener documentos HTML más limpios, código menos redundante, mejor organizado... es que puedes introducir modificaciones posteriores sin tener que recorrer todo el contenido de tu HTML modificando. Y si entra en juego Javascript, puedes modificar contenido de forma dinámica mediante clases con una facilidad asombrosa.
Supongamos una página con miles o millones de documentos HTML. Puedes aplicar estilos en ellos de varias formas.
forma 1:
Aplicando estilos directamente a los elementos, mediante la etiqueta style
:
<p style="color:red;">Texto en rojo</p>
<p style="color:red;">Otro texto en rojo</p>
forma 2:
Aplicando estilos mediante hojas de estilo CSS:
Tendrías esto en el CSS:
.rojo {
color:red;
}
Y esto en el HTML:
<p class="rojo">Texto en rojo con nombre de clase y CSS</p>
<p class="rojo">Otro texto en rojo con nombre de clase y CSS</p>
Supongamos que tienes miles de documentos con texto como en la forma uno, y luego hay necesidad de que además de aparecer en rojo, tiene que aparecer también en negritas.
Para hacer ese cambio en la forma 1, tendrías que ir buscando en tus miles de documentos cada etiqueta y modificarla cada una de la forma siguiente:
<p style="color:red; font-weight: bold;">Texto en rojo</p>
<p style="color:red; font-weight: bold;">Otro texto en rojo</p>
Para hacerlo en la forma 2, sólo tendrías que agregar una línea al CSS:
font-weight: bold;
Esta es sólo una, entre muchas ventajas del uso de class
.
Las hojas de estilo se enlazan con el documento HTML, colocando el estilo directamente en el encabezado del HTML, usando la etiqueta <style>
o enlazando el documento HTML con un documento CSS, mediante la etiqueta <link>
.
Ejemplo de código:
Aunque verás que el resultado es el mismo, el mantenimiento es diferente, sobre todo cuando hay que introducir o quitar algo nuevo en el estilo.
.rojo {
color:red;
font-weight:bold;
}
Forma 1
<p style="color:red; font-weight: bold;">Texto en rojo</p>
<p style="color:red; font-weight: bold;">Otro texto en rojo</p>
<hr />Forma 2
<p class="rojo">Texto en rojo mediante CSS</p>
<p class="rojo">Otro texto en rojo mediante CSS</p>
Esto es lo básico.
Puedes tener más información en la documentación de CSS, de HTML. Puedes ver también este enlace.
En páginas como codepen puedes ver ejemplos de millones de cosas que se pueden hacer combinando HTML+CSS o HTML+CSS+Javascript.