Lección 5: El atributo “class” en HTML5

El atributo “class” se añade a una etiqueta y sirve para definir de que clase es esa etiqueta (es decir, a que clase corresponde). Con esto empezamos a sacar todo el partido al lenguaje de programación CSS.

Supongamos que tenemos dos etiquetas iguales de tipo <button>, correspondientes a objetos html de tipo botón. Le añadimos una clase a uno de los botones para diferenciarlo de un botón normal. A partir de ese momento el botón que tiene el atributo class informado pasa a ser un objeto de esa clase. Puede haber cualquier número de elementos de una clase, incluso elementos diferentes que queramos que compartan las propiedades de esa clase.

En el siguiente ejemplo vamos a crear la clase “rojo” y añadirsela a un objeto de tipo botón (<button>).

Crear un atributo clase CSS para aplicar estilos a una etiqueta html

Siguiendo la explicación que vimos en el artículo de etiquetas y atributos vamos a crear una etiqueta de tipo <button> correspondiente a un botón y vamos a añadir el atributo “class” con valor rojo (class=”rojo”).

A continuación creamos la clase correspondiente al valor “rojo”:

  • Para crear una clase de estilo CSS simplemente añadimos las etiquetas <style> y </style>. Estas etiquetas se colocan dentro del <head></head> y, como comentamos en artículo anteriores, no corresponde a objetos visibles si no que corresponde a características o información adicional de la página.
  • Dentro de la etiqueta <style> creamos una clase (un punto seguido del nombre de la clase) y añadimos pares de atributo/valor dentro de unas llaves { }. El atributo siempre va a la izquierda y va seguido de dos puntos. A continuación va el valor de ese atributo y cerramos la expresión con punto y coma.

boton-rojo-css

Si no quieres escribirlo puedes copiar el siguiente código, aunque os recomendamos escribirlo para que os vayáis acostumbrando a la estructura del lenguaje html:

<!DOCTYPE html>
<html>
<head>
<style>
.rojo {
background-color: red;
}
</style>
</head>
<body>
<button>Botón normal</button>

<button class=”rojo”>Botón rojo</button>
</body>
</html>

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *