Repaso a los métodos por los que se pueden aplicar estilos a las páginas web mediante CSS.
Vamos a ver otra vez distintos modos de aplicar estilos a las páginas. Es un tema que ya vimos en el manual de CSS, pero merece la pena refrescar conceptos y ampliar la información que se ofreció en su día.
Aplicación de estilo a etiquetas
Se puede asignar el estilo a una etiqueta concreta de HTML. Para ello, en la declaración de estilos escribimos la etiqueta y entre llaves, los atributos de estilo que deseemos.
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.
Definición de clases
Podemos utilizar una clase si deseamos crear un estilo específico, para luego aplicarlo a distintos elementos de la página. Las clases en la declaración de estilos se declaran con un punto antes del nombre de la clase.
.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{
background-color: #000000;
color: #ffffff;
}
.inverso{
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.
Estilos que sólo se utilizan una vez
También podemos tener un estilo específico para un único elemento, que no va a repetirse en ningún otro caso. Para ello tenemos los estilos asignados por identificador. Los identificadores se definen en HTML utilizando el atributo id en la etiqueta que deseamos identificar. El valor del atributo id será el que definamos nosotros.
<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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...