4.4. Definición y uso de clases

El uso de clases nos permite definir estilos genéricos y aplicarlos a varios elementos HTML. Esto es posible cuando las reglas de estilos se asocian a un documento HTML utilizando un fichero externo o incluyéndolas en el contenido de la etiqueta style en la cabecera del documento.

Crear una clase

Para crear una clase específica, se escribe un carácter de punto (.) seguido del nombre de la clase:

.clase_azul {
color:blue
}

Uso de una clase

Para asociar un elemento HTML a una clase habrá que usar el atributo class al usar dicho elemento en el documento HTML:

<h3 class="clase_azul">El encabezado de tercer nivel es ahora azul</h3>

Uso restringido de una clase

Para restringir la clase a un determinado elemento basta poner el elemento delante del punto al definir la regla. Por ejemplo, para restringir el uso de la clase a párrafos tendremos:

p.clase_azul {
    color:blue
}

Un ejemplo de un documento HTML en el que se utiliza este método para incluir formatos es:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de clases en hojas de estilo</title>
<style type="text/css"> .clase_azul{color:blue} p.clase_roja{color:#ff0000; font-style:italic; font-weight:bolder; font-family:courier;} </style>
</head>

<body>
<h3 class="clase_azul">Ejemplo del uso de clases en hojas de estilo</h3>
<p>Cualquier elemento sobre el que apliquemos la clase clase_azul tendr&aacute; el texto azul.</p>
<p class="clase_azul"> Incluso el p&aacute;rrafo.</p>
<p class="clase_roja">Sobre el p&aacute;rrafo podemos aplicar la clase clase_roja y el texto ser&aacute; rojo, en negrita cursiva y la familia del texto courier.</p>
<h3 class="clase_roja"> Pero este texto no aparecer&aacute formateado ya que la clase clase_roja s&oacute;lo act&uacute;a sobre p&aacute;rrafos.</h3>
</body>
</html>