Introduccin a las hojas de estilo El concepto de hojas de estilo apareci por primera vez en 1996 cuando W3C public

una recomendacin nueva intitulada "Hojas de estilo en cascada" o CSS, su sigla en ingls. El principio de las hojas de estilo consiste en la utilizacin de un solo documento para almacenar las caractersticas de presentacin de las pginas asociadas a grupos de elementos. Esto implica nombrar un conjunto de definiciones y caractersticas de presentacin de las pginas, y activar esos nombres para aplicarlos a una parte del texto. Por ejemplo, se pueden configurar los ttulos de una seccin para que aparezcan en fuente Arial, en color verde y en cursiva. Las hojas de estilo se desarrollaron para compensar los defectos de HTML con respecto a la presentacin y al diseo de las pginas. HTML tiene varias etiquetas para modificar la presentacin y definir los estilos del texto, pero cada elemento tiene su propio estilo, independientemente de los elementos que lo rodean. Al utilizar hojas de estilo, cuando se necesite cambiar la apariencia de un sitio que tiene cientos de pginas Web todo lo que hay que hacer es editar las definiciones de la hoja de estilo en un solo lugar para cambiar la apariencia del sitio completo. Se denominan "hojas de estilo en cascada" porque se pueden definir mltiples hojas y los estilos pueden aplicarse a todas las pginas (con un sistema predefinido para resolver conflictos). Las hojas de estilo pueden utilizarse para: lograr una apariencia uniforme de todo el sitio al activar una sola definicin de estilo en cada pgina, cambiar un aspecto en todo el sitio Web con tan slo editar unas pocas lneas, hacer que los cdigos HTML sean ms fciles de leer ya que los estilos se definen por separado, permitir que las pginas se carguen ms rpido ya que hay menos cantidad de HTML en cada pgina, posicionar los elementos de la pgina de una manera ms uniforme.

CSS 2.0 Desde el 12 de mayo de 1998, la norma CSS 2.0 ha sido el estndar vigente. CSS 2.0 agrega caractersticas nuevas a la norma anterior (1.0), que incluye: Consideraciones sobre cmo se va a mostrar un documento en los distintos medios (como una pantalla, una impresora, un sistema Braille, un sintetizador de voz, etc.). Adicin de caractersticas de sonido para ciegos y minusvlidos visuales. Cursores para maniobrar. Administracin de desbordamiento y visibilidad de elementos.

Compatibilidad con los navegadores A pesar de las recomendaciones de W3C, no todos los navegadores muestran las hojas de estilo de la misma forma. El explorador Microsoft Internet Explorer 3.0 fue el primero que integr hojas de estilo y su uso se hizo ms comn con las versiones 4.0 y superiores de Internet Explorer y NetscapeNavigator. Navegadores que admiten hojas de estilo: Microsoft Internet Explorer 3.0 (parcialmente) Microsoft Internet Explorer 4 x Microsoft Internet Explorer 5 x Microsoft Internet Explorer 6 x Netscape Navigator 4.x Netscape Navigator 6.x Netscape Navigator 7.x Mozilla x.x Firefox x.x Opera 5.x Opera 6.x Opera 7.x Camino 0.8x Safari 1.xx

Definicin de un estilo Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los elementos de la pgina. Una regla CSS se caracteriza por dos elementos principales: Un selector de tipo para especificar a qu etiquetas del documento se aplica el estilo. Una declaracin de estilo, que se define entre parntesis, para especificar qu estilo aplicar a las etiquetas seleccionadas. A su vez, la declaracin est compuesta por: una o ms propiedades, seguidas por el carcter ":" (dos puntos) uno o ms valores asociados a cada propiedad, entre comillas y separados por comas si hay mltiples valores, y todos seguidos por un punto y coma.

Por lo tanto, la sintaxis es:

La siguiente sintaxis define, a forma de ejemplo, el estilo a aplicar a hipervnculos (etiqueta <A>), especficamente fuente Verdana de 18 pxeles de tamao, en negrita y en color amarillo: A{ font-family: Verdana; font-size: 18px; font-style: bold; color: yellow } Selectores de tipo Los "selectores de tipo" (o "selectores de elementos de tipo") son las palabras que estn delante de los parntesis y que indican las etiquetas a las que se aplica el estilo que aparece entre parntesis. Para definir el estilo de una etiqueta HTML en particular, slo debe usarse el nombre de la etiqueta (sin los caracteres < y >). Porejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!--tag {properties} --> </STYLE> </HEAD> <BODY> <tag> ... </tag>... </BODY> </HTML>

Selectores mltiples Tambin se puede aplicar un estilo a mltiples etiquetas al separar los nombres de las mismas con una coma (,). La sintaxis de tal selector, denominado selector mltiple, es: type-selector1, type-selector2 { /* style */ } Selector universal A travs del selector universal ("*") se puede definir un estilo que se aplicar a todos los elementos HTML. La sintaxis del selector universal es: * { /* style */ }

El selector universal generalmente no se implementa en navegadores

Selectores anidados Se puede seleccionar una etiqueta dentro de un contexto dado, es decir, segn los elementos que se encuentran alrededor, mediante selectores contextuales. Existen varios tipos de selectores contextuales: El selector anidado se usa para crear una regla que se aplica solamente cuando el elemento Y est anidado dentro del elemento X. Su sintaxis es: selector_Xselector_Y{ /* style; */ } Para el siguiente cdigo HTML: <p><i>Nota</i>, esto es una <b>advertencia</b></p><b> Leer detenidamente </b> La siguiente regla slo afecta a la palabra "advertencia" (la nica rodeada por etiquetas <B> que estn a su vez anidadas dentro de un grupo de etiquetas <P>): P B { font-weight: bold; color: red; } El selector de hermanos adyacentes se usa para crear una regla que se aplica solamente cuando el elemento Y le sigue inmediatamente al elemento X. Su sintaxis es: selector_X + selector_Y{ /* style; */ }

Para el siguiente cdigo HTML: <p><i>Nota</i>, esto es una <b>advertencia</b></p><b> Leer detenidamente </b> La siguiente regla slo afecta a la palabra "advertencia" (la nica rodeada por etiquetas <B> que a su vez siguen al grupo de etiquetas <l>): I + B { font-weight: bold; color: red; } El selector de hijo se usa para crear una regla que solamente se aplica cuando el elemento Y es descendiente del elemento X. La regla no se aplica si Y se encuentra dentro de una o ms etiquetas intermediarias. Su sintaxis es: selector_X>selector_Y{ /* style; */ }

Para el siguiente cdigo HTML: <p><b><i> Nota </i></b>, esto es una <i><b> advertencia </b></i></p><b> Leer detenidamente </b> La siguiente regla slo afecta al elemento "<i> Nota </i>" (la nica rodeada por etiquetas <B> que estn a su vez dentro de un grupo de etiquetas <P>): P > B { font-weight: bold; color: red; } Comentarios Es posible (y se recomienda) documentar las hojas de estilo a travs de la incorporacin de comentarios que aportan informacin adicional (una razn para elegir un estilo u otro, el tipo de documento al que se va a aplicar, el contexto, etc.). Los comentarios CSS estn marcados con los signos /* y */: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!--/* Estoesuncomentario */ tagA {properties} tagB {properties} tagC {properties} --> </STYLE> </HEAD> <BODY>...</BODY> </HTML>

Un estilo puede aplicarse "en lnea" a cualquier etiqueta HTML, exceptuando lo siguiente: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Las etiquetas <SPAN> y <DIV>

En ocasiones, dentro de un mismo prrafo, se deben aplicar estilos diferentes a ciertos segmentos de texto y es para ello que se utilizan las etiquetas <SPAN> y <DIV>.

La etiqueta <SPAN>
La etiqueta <SPAN> se utiliza para aplicar estilos a los segmentos de un prrafo. Se puede usar con ID o con CLASS. Su sintaxis es:
<SPAN class=Nonmbre_de_la_clase> Texto </SPAN>

La etiqueta <DIV>
En lugar de aplicar estilos a unas pocas palabras dentro de un prrafo, esta etiqueta los aplica a un bloque de texto, que puede ser un prrafo o varios. La sintaxis de la etiqueta DIV es:
<DIV class=important>prrafos</DIV>

p{ font-style: normal; font-variant: small-caps; font-weight: bold; font-size: 1.5em; line-height: 1.5; font-family: Arial, sans-serif; } div{ margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; padding-top: 3px; padding-right: 5px; padding-bottom: 10px; padding-left: 7px; }

h1 { background-color: #FFFFFF; background-image: url("imagenes/icono.png"); background-repeat: no-repeat; background-position: 10px 5px; }

Utilizando las propiedades shorthand es posible convertir las 24 lneas que ocupa la hoja de estilos anterior en slo 10 lneas, manteniendo los mismos estilos:

p { font: normalsmall-capsbold1.5em/1.5 Arial, sans-serif; } div { margin: 5px 10px; padding: 3px 5px 10px 7px; } h1 { background: #FFFurl("imagenes/icono.png")no-repeat 10px 5px; }