FAQ 36 P: Aplicar dos o más clases a un mismo elemento
R: Supongamos que queremos que un elemento, por ejemplo un párrafo (<p>), tenga las declaraciones de dos clases distintas:
Nuestro archivo estilo.css:
Código:
.aviso {
font-weight: bold;
border: 1px solid #c00;
}
.centrado {
text-align: center;
}
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es-ES">
<head>
<title>Aplicando varias clases a un elemento</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./estilo.css" />
</head>
<body>
<p class="aviso centrado">
Este es un párrafo de aviso y con el texto centrado.
</p>
</body>
</html>
Como veis es tan sencillo como escribir las clases que queramos aplicar al elemento en cuestión separadas por un espacio. Esto se puede incrementar si creamos un selector de ID (# en lugar del .) y declaramos mas propiedades.
Esta propiedad se debe a que las declaraciones de estilo soportan la herencia, tanto como si en dos archivos declaramos la misma clase, añadiendo ciertas declaraciones ademas de las que ya tenía, como si hacemos lo que yo os propongo en esa FAQ, que es "sumar" las declaraciones de dos clases en un solo elemento.
Como apreciación, decir que las hojas de estilo aplican (si es que existe otra anterior) la ultima declaración, de ahí su nombre de hojas de estilo en cascada; es decir, que si en la primera clase declaramos una alineación a la derecha, y en la siguiente clase que le aplicamos al elemento, declaramos una alineacion centrada, el elemento va a tomar la última.