INFORMATICA

GUIA 7. HOJAS DE ESTILO EN CASCADA

Las hojas de estilo representan un gran avance con respecto a mejorar la apariencia de las pginas web.
Adems hay otro aspecto muy interesante de las hojas de estilo, y es que separan por completo la
informacin para la presentacin de una pgina de su contenido, con lo que se facilita mucho el diseo y
revisin de las pginas, pues se puede variar la presentacin de una pgina, o de todo el conjunto de ellas,
sin cambiar una sola lnea del cdigo del HTML. Se pueden definir variaciones de diseo por medio de las
"clases". Por ejemplo, si se necesitan cinco estilos de prrafos diferentes, se pueden definir cinco clases
para la etiqueta <P> : P.normal, P.indentado, P.subrayado, P.rojo y P.dobleespacio.
Cmo funcionan?
Las hojas de estilo en cascada nos permiten redefinir las reglas que utiliza el navegador para presentar una
pgina del Web. Cada etiqueta define sus propias reglas para mostrar el texto que engloba. Con las hojas
de estilo podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro
antojo el comportamiento de cada etiqueta. Hay tres maneras de aadir estilos a nuestras pginas Web.

Aadiendo instrucciones de estilo slo a etiquetas concretas, o a un grupo de ellas.

Incluyendo las instrucciones de estilo en el documento HTML de una pgina concreta - de una manera
anloga a cmo se incluye un script de Javascript. Esto permite cambiar la apariencia de una hoja
entera.
Enlazando todos documentos HTML de todas las pginas que componen un sitio del Web con un fichero
de definicin del estilo. De esta manera, se puede cambiar la apariencia de mltiples pginas retocando
un solo fichero.

1. Estilo para etiquetas concretas o grupos de etiquetas

Este mtodo es el apropiado si slo se desea cambiar el estilo en unas secciones determinadas de una
pgina. Con l podemos manipular las propiedades de alguna etiqueta o de algn grupo de etiquetas. Se
hace aadiendo el atributo STYLE, que contiene una serie de propiedades, dentro de la etiqueta
correspondiente. Veamos el siguiente ejemplo:
<P>
"Este es un prrafo normal, sin mrgenes a la izquierda ni a la derecha, con el color de su texto en negro".
<P STYLE="margin-left: 0.5in; margin-right: 0.5in; color:green">
"Quiero que este otro prrafo tenga un margen izquierdo de media pulgada, al igual que el margen derecho.
Adems quiero que su texto sea de color verde".
Observe que se ponen entre comillas una serie de propiedades (ejemplo, margin-left), y despus de dos
puntos se pone el valor de esa propiedad (0.5in o sea, 0.5 pulgadas). Las distintas propiedades debern
estar separadas por punto y coma. Si queremos cambiar la apariencia de una seccin entera, se puede
utilizar la etiqueta <DIV>, con la que definimos el estilo globalmente para esa seccin. En el siguiente
ejemplo cambiamos el color (a rojo) y el tamao de la fuente (a 16 puntos de altura) de un bloque de
etiquetas por medio de la etiqueta <DIV>, lo que tiene el mismo efecto que si hubiramos asignado este
estilo separadamente a cada una de las etiquetas englobadas (<P>, <UL> y <LI>):
<DIV STYLE="font-size: 16pt; color: red">
<P>La definicin del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.
<P>Este texto tambin es rojo y tiene 16 puntos de altura.
<P>Al igual que esta lnea.
</DIV>
Qu ocurre si a una de las etiquetas englobadas por DIV le introducimos un estilo distinto? Comprobmoslo
introduciendo un estilo propio a la segunda etiqueta <P>:
<DIV STYLE="font-size: 16pt; color: red">
<P>
Veamos si la definicin del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas, hasta la etiqueta
de cierre de DIV.
<P STYLE="color: blue">Esta lnea es azul, a pesar de estar englobada dentro de DIV, porque tiene su
propio estilo.

<P>Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.
</DIV>