body {
background-color: #f0f0f0;
color: #333366;
}
Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas seguidas por comas y luego, entre llaves, los atributos que queramos definir.
h1, p{
color: red;
}
En este caso se define que los encabezados de nivel 1 y los párrafos, tengan letra roja.
.miclase{
color: blue;
}
Para asignar el estilo definido por una clase en un elemento HTML, simplemente se añade el atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class se asigna al nombre de la clase a aplicar. Por ejemplo:
<p class="miclase">este párrafo tiene el estilo definido en la clase "miclase".</p>
El párrafo anterior se presentaría con color azul. La definición de clases y su utilización es sencilla, pero veamos un ejemplo más detallado:
Para la siguiente declaración de estilos:
body, td, p{
.inverso{
background-color: #000000;
color: #ffffff;
}
background-color: #ffffff;
color: #000000;
}
Se ha definido un fondo negro y color del texto blanco para el cuerpo de la página, así como las celdas y los párrafos. Luego se ha declarado una clase, de nombre "inverso", con los colores al revés, es decir, fondo blanco y texto negro.
<body>
<p>Hola esto es un parrafo normal</p>
<p class="inverso">Párrafo con los colores invertidos</p>
<table>
<tr>
<td class="inverso">INVERSO</td>
<td>NORMAL</td>
</tr>
</table>
</body>
Esta página tiene, generalmente, el fondo negro y el texto blanco. El primer párrafo, que es un párrafo normal, sigue esa definición general de estilos, pero el segundo párrafo, al que se ha aplicado la clase "inverso", tiene el fondo blanco y el texto en negro. Por lo que respecta a la tabla, en su primera celda se ha asignado la clase "inverso", por lo que se verá con fondo blanco y color de texto en negro. Mientras que la segunda celda, que no tiene asignada ninguna clase, se presentará como se definió en la regla general.
Para conocer los resultados obtenidos en el anterior ejemplo podemos verlo en una página aparte.
<div id="capa1">
En la hoja de estilos, para definir el aspecto de ese elemento con id único, se escribe el carácter almohadilla, seguido del identificador indicado en la etiqueta y entre llaves los atributos css que deseemos.
#capa1{
font-size: 12pt;
font-family: arial;
}
En este caso se ha asignado fuente de tamaño 12 puntos y cuerpo arial.
Como se puede concluir en la lectura de estas líneas, generalmente se prefiere utilizar estilos definidos en clases a los definidos con identificadores, a no ser que estemos seguros que ese estilo no se va a repetir en todo el documento.
Compartir en redes sociales
Usuarios: 
24 de enero de 2005
Valoración del artículo:
