Dado que el número de etiquetas del HTML es reducido, es probable que en una página web se quiera dar un formato distinto a elementos con la misma etiqueta. Se puede sortear esta limitación utilizando clases, que se pueden asignar a cualquier elemento de una página web.
Las clases se asignan con el atributo class. El valor del atributo class (el nombre de la clase) sólo pueden contener caracteres ingleses, números, guiones y subrayados, aunque el primer carácter no puede ser ni un número ni un guion.
<p>- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>
<p class="aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>
p.aviso {
color: red;
}
Cuando se define una clase de elemento, la regla se aplica únicamente a los elementos de ese tipo que tienen esa clase. En el ejemplo siguiente, en la hoja de estilo está definida la clase aviso para la etiqueta <span>. Esa regla no se aplica a ningún elemento, puesto que en la página web la etiqueta <span> no tiene atributo class y la clase aviso está asignada a una etiqueta diferente (<p>).
<p>- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ...<span>la parte contratante de la primera parte será considerada como la parte contratante de la primera parte</span>. ¿Qué tal, está muy bien, eh?</p>
<p class="aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>
span.aviso {
color: red;
}
Los navegadores distinguen los nombres de clases escritos en mayúsculas o minúsculas. En estos apuntes se recomienda utilizar únicamente minúsculas.
<p class="aviso">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>
<p class="Aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>
p.aviso {
color: red;
}
p.Aviso {
color: blue;
}
A un elemento con clase se le aplica tanto la regla de la clase como la regla de la etiqueta general (esta es una característica del mecanismo de cascada de las hojas de estilo).
En el ejemplo siguiente, en la hoja de estilo se ha escrito una regla para párrafos <p> en general y otra regla para los párrafos de clase aviso. El elemento con clase hereda las propiedades de los elementos sin clase.
<p>- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>
<p class="aviso">- No, eso no está bien. Quisiera volver a oírlo.</p>
p {
font-style: oblique;
}
p.aviso {
color: red;
}
Combinar varias clases simultáneamente
Un elemento puede tener asignado varias clases. Para asignar varias clases a un elemento, hay que escribir en el atributo class los nombres de todas las clases que se quieren aplicar, separados por espacios.
<p class="groucho">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ... la parte contratante de la primera parte será considerada como la parte contratante de la primera parte. ¿Qué tal, está muy bien, eh?</p>
<p>- No, eso no está bien. Quisiera volver a oírlo.</p>
<p class="groucho aviso">- Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte.</p>
El orden en que se escriban los nombres de las clases en el atributo class no es importante, aunque sí que es importante el orden de las reglas en la hoja de estilo. Como muestran los dos ejemplos siguientes, si la misma propiedad está definida en varias clases y a un elemento tiene asignado varias clases, se aplica la definición de la clase que aparece después en la hoja de estilo (esta es una característica del mecanismo de cascada de las hojas de estilo).
<p class="borde-1 borde-2">Este párrafo tiene como clase "borde-1 borde-2".</p>
<p class="borde-2 borde-1">Este párrafo tiene como clase "borde-2 borde-1".</p>
p.borde-1 {
border: red 3px solid;
}
p.borde-2 {
border: blue 3px dotted;
}
<p class="borde-1 borde-2">Este párrafo tiene como clase "borde-1 borde-2".</p>
<p class="borde-2 borde-1">Este párrafo tiene como clase "borde-2 borde-1".</p>
p.borde-2 {
border: blue 3px dotted;
}
p.borde-1 {
border: red 3px solid;
}
Se puede escribir un selector que se aplique únicamente a los elementos que tienen definidas varias clases.
<p class="borde-1">Este párrafo tiene como clase "borde-1".</p>
<p class="borde-2">Este párrafo tiene como clase "borde-2".</p>
<p class="borde-1 borde-2">Este párrafo tiene como clase "borde-1 borde-2".</p>
p.borde-1.borde-2 {
border: red 3px dotted;
}
p.borde-1 {
border: red 3px solid;
}
p.borde-2 {
border: blue 3px dotted;
}
Asignar la misma clase a distintos elementos
Se puede asignar la misma clase a elementos distintos:
definiendo la clase para cada elemento, en cuyo caso cada elemento puede tener propiedades distintas aunque el nombre de la clase sea el mismo,
<p class="borde-1">Este párrafo tiene como clase "borde-1".</p>
<p>Este párrafo tiene esta <span class="borde-1">palabra</span> con clase "borde-1".</p>
p.borde-1 {
border: red 3px solid;
}
span.borde-1 {
border: red 3px dotted;
}
definiendo una clase universal, en cuyo caso todos los elementos tienen las mismas propiedades,
<p class="borde-1">Este párrafo tiene como clase "borde-1".</p>
<p>Este párrafo tiene esta <span class="borde-1">palabra</span> con clase "borde-1".</p>
.borde-1 {
border: red 3px solid;
}
/* La clase universal también se puede escribir así:
*.borde-1 {
border: red 3px solid;
}
*/
Número de clases
En principio, se suelen definir tantas clases como tipos de elementos distintos queremos mostrar, pero se podría definir una clase menos aprovechando que también podemos definir en la hoja de estilo la etiqueta sin clase. Los dos ejemplos siguientes darían el mismo resultado.
En este primer ejemplo, para distinguir las intervenciones de los dos personajes en un diálogo, se da clase a todos los párrafos. Los nombres de la clase son los nombres de los personajes.
<p class="groucho">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ...<span class="aviso">la parte contratante de la primera parte será considerada como la parte contratante de la primera parte</span>. ¿Qué tal, está muy bien, eh?</p>
<p class="chico">- No, eso no está bien. Quisiera volver a oírlo.</p>
<p class="groucho">- Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte.</p>
<p class="chico">- Esta vez creo que suena mejor.</p>
<p class="groucho">- Si quiere se lo leo otra vez.</p>
<p class="chico">- Tan solo la primera parte.</p>
<p class="groucho">- ¿Sobre la parte contratante de la primera parte?</p>
<p class="chico">- No, solo la parte de la parte contratante de la primera parte.</p>
En este segundo ejemplo, para distinguir las intervenciones de los dos personajes en un diálogo, sólo se da clase a los párrafos de uno de ellos. El nombre de la clase es el nombre del personaje. La propiedad que antes se establecía en la clase del segundo personaje, esta vez se establece para la etiqueta general (sin clase).
<p class="groucho">- Haga el favor de poner atención en la primera cláusula porque es muy importante. Dice que ...<span class="aviso">la parte contratante de la primera parte será considerada como la parte contratante de la primera parte</span>. ¿Qué tal, está muy bien, eh?</p>
<p>- No, eso no está bien. Quisiera volver a oírlo.</p>
<p class="groucho">- Dice que… la parte contratante de la primera parte será considerada como la parte contratante de la primera parte.</p>
<p>- Esta vez creo que suena mejor.</p>
<p class="groucho">- Si quiere se lo leo otra vez.</p>
<p>- Tan solo la primera parte.</p>
<p class="groucho">- ¿Sobre la parte contratante de la primera parte?</p>
<p>- No, solo la parte de la parte contratante de la primera parte.</p>
p.groucho {
color: red;
}
p {
color: blue;
}
La ventaja del segundo método es que hay que asignar menos clases. El inconveniente es que las propiedades de la clase no definida hay que asignarla a la etiqueta general y se aplican a todos los elementos.
En general, suele ser más conveniente definir tantas clases como elementos distintos, salvo que una de las clases se tenga que aplicar a casi todos los elementos (más que el resto de clases juntas, por ejemplo) en cuyo caso se puede omitir esta clase y dejarla como etiqueta general. Pero este es un aspecto a valorar en cada página en concreto.
