Las etiquetas de un documento HTML estan organizadas de manera que unas engoblan a otras. Por ejemplo todas las etiquetas se encuentran dentro del TAG <BODY> y otras como <EM> la podemos encontrar entre <P>, <H1>, <UL>, etc...
Esta organizaci�n permite una relaci�n padre-hijo de manera que los estilos definidos para etiquetas padres seran heredados por los hijos.
Por ejemplo si definimos:
<STYLE TYPE="text/css">
<!-
BODY {font-family:Arial; color:blue;}
-->
</STYLE>
en principio todo el documento estara con una fuente Arial de color azul.
Esta caracteristica puede resultar muy �til ya que evita tener que volver a definir los mismos estilos para diferentes etiquetas. Es decir con el ejemplo anterior nos evitamos (si nos interesa) tener que volver a definir en la etiqueta <P> la fuente y su color.
El mecanismo de herencia de estilos siempre funciona a menos que un elemento hijo tenga definido su propio estilo, el cual prevalece sobre el heredado e incluso en algunos casos se complementan.
En el siguiente caso:
<HTML>
<HEAD>
<TITLE>Esta es mi primera hoja de estilos</TITLE>
<STYLE TYPE="text/css">
<!-
P {color:blue; font-size:12pt;}
EM {color:red; text-transform:uppercase;}
-->
</STYLE>
</HEAD>
<BODY>
<P>Este es un parrafo donde <B> la etiqueta <B> </B>hereda
el estilo de <P></P>
<P>En cambio <EM> en la etiqueta <EM></EM> al estar definido
prevalece su propio estilo<</P>
</BODY>
</HTML>
Observamos como la etiqueta <B> utilizada para colocar negrita si que remarca el texto pero lo deja en azul ya que hereda ese valor de <P>. En cambio <EM> aparece en mayusculas y verde a pesar de estar dentro de <P> ya que le hemos definido su propio estilo.
Otro caso es por ejemplo el de esta p�gina. En la etiqueta <BODY> se ha definido los margenes que tendra la p�gina y ya no hemos tenido que volver a definirlos ya que el resto de etiquetas lo heredan.
Otro aspecto importante es que esta herencia supone algunas veces una complementaci�n entre los estilos definidos. Por ejemplo como hemos dicho anteriormente en la etiqueta <BODY> hemos definido unos determinados margenes. Luego he definido un estilo para diferenciar el c�digo del resto de los parrafos y he vuelto a definir los margenes pero teniendo en cuenta la cantidad que habia puesto anteriormente.
Aunque hay que tener en cuenta que no todas las propiedades se heredan y que es conveniente tener las especificaciones a mano para ver cuales se heredan y cuales no.
�Estilos en funci�n del contexto
Otra caracter�stica importante es que podemos dar estilos a un elemento dependiendo de donde se encuentre colocado en la p�gina, es decir a una etiqueta no tiene porque corresponderle siempre el mismo estilo sino que podemos hacer que este dependa de la situaci�n en la que se encuentre.
En el siguiente ejemplo la etiqueta <B> aparece marca texto en rojo en una situaci�n y en azul en otro. Azul cuando se encuentra dentro de un parrafo normal y rojo cuando esta en una lista.
<HTML>
<HEAD>
<TITLE>Esta es mi primera hoja de estilos</TITLE>
<STYLE TYPE="text/css">
<!-
P B{color:blue}
LI B {color:red}
-->
</STYLE>
</HEAD>
<BODY>
<P>Aqui aparece <B> azul </B> ....</P>
<P>En cambio en la siguiente lista aparece...
<UL>
<LI>Aparece <B>rojo</B> ....</LI>
</UL>
</BODY>
</HTML>
�El concepto de cascada
A traves del concepto de cascada se establecen las reglas que determinan la forma en que una definici�n de estilo puede sustituir a otra.
Como ya hemos visto los estilos pueden definirse en varios sitios:
- En un fichero externo .css que luego referenciamos a traves de la etiqueta <LINK> o @IMPORT.
- A traves de un bloque de estilos definidos en la etiqueta <STYLE>.
- O directamente sobre la etiqueta HTML.
La utilizaci�n conjunta de estos m�todos no es incompatible, sino que en muchos casos necesaria y recomendable. Es decir en una p�gina HTML nos puede interesar utilizar la .css global que utilizamos para toda la Web, y luego otras particulares que definimos para esta p�gina. Esto va a dar lugar a que muchas definiciones de estilo se solapen y entonces la reglas de cascada nos garantizan que manda la �ltima especificaci�n de estilo definida siguiendo el orden jerarquico definido en la lista anterior.