Hojas de estilo ahora!

Las hojas de estilo Web han estado disponibles por varios aos, pero su potencia e importancia fueron muy ignoradas ya que existan pocas implementaciones. Los autores Web, ansiosos de agregar creatividad a sus pginas incidiendo en la presentacin, comenzaron a usar las extensiones propietarias de Netscape en vez de las ms potentes hojas de estilo. Esto era muy natural, ya que las extensiones propietarias de Netscape podan ser vistas por una parte significativa de los usuarios de la Web, mientras que pocos podan ver mejoras con hojas de estilo. Hoy en da, ms y ms navegadores est implementando hojas de estilos, abriendo los ojos de los autores a caractersticas nicas que permiten incidir sobre la presentacin y preservar la independencia de plataforma. Las ventajas de las hojas de estilo se volvieron obvias, as como las desventajas de crear continuamente ms etiquetas HTML para efectos de presentacin. Los atributos BODY de Netscape son ahora ampliamente aceptados en la Web, y pronto sern norma en HTML 3.2. Sin embargo, BGCOLOR, TEXT y sus amigos simplemente no brindan la flexibilidad de las hojas de estilo. La mayora de imgenes de fondo dejaran una pgina ilegible para alguien con una pantalla de slo 16 colores; muchas pginas son difciles de leer con slo 256 colores. Con los atributos BODY convencionales, un autor debe elegir si los beneficios de una imagen de fondo son mayores que los costos; con hojas de estilo, un autor puede ofrecer un nmero de imgenes diferentes, en diferentes hojas de estilo, tal que el usuario pueda elegir la "hoja de estilo de 24-bit" o la "hoja de estilo de 8-bit," dependiendo de cuantos colores puede mostrar su sistema. Si ningn estilo brindado por el autor es adecuado para el usuario, se puede simplemente ignorar el estilo del autor. Las hojas de estilo pueden hacer mucho ms sencilla la vida de un autor. Mientras que uno podra usar <HR WIDTH="75%" SIZE=5 ALIGN=center> para cada regla horizontal, esto se vuelve muy engorroso para el autor. Con hojas de estilo, solo se necesita especificar tal preferencia una vez, y el estilo puede ser aplicado al sitio completo. Y si el autor decide queWIDTH="50%" sera mejor, solo necesita

cambiar esta preferencia en un solo lugar, en vez de tener que buscar a travs de cientos de pginas para cambiar el HTML. Las hojas de estilo tambin reducen el tiempo de descarga cuando un archivo contiene toda la informacin de estilos. Las hojas de estilo tambin ofrecen mucho mayor flexibilidad en trminos de los efectos de presentacin que brindan. Las propiedades como color, background, margin, border, y muchas ms pueden aplicarse a todos los elementos. Con solo HTML y sus extensiones propietarias, uno debe confiar en atributos como BGCOLOR, que est disponible solo para unos cuantos elementos. Las hojas de estilo dan la flexibilidad de aplicar un estilo a todos los prrafos, o a todos los encabezados de nivel dos, o a todo el texto con nfasis. Con hojas de estilo, los autores pueden usar la propiedad textindent para sangrar texto, en vez de recurrir a desagradables artificios como <DD> o <IMG SRC="blanco.gif" WIDTH=10 ALT=""> que acarrean muchos efectos laterales negativos. Los mrgenes pueden ser sugeridos sin tener que poner la pgina entera en una tabla. Las hojas de estilo tambin reducen la necesidad de bsqueda y reemplazo en multiarchivos; si un autor decide cambiar la sangra de todos los prrafos en un sitio, solo tiene que cambiar una lnea en la hoja de estilo. Las hojas de estilo representan un gran paso adelante para la Web. Con la separacin de contenido y presentacin entre HTML y hojas de estilo, la Web ya no necesita alejarse del gran ideal de independencia de plataforma que brind el medio con su inicial impulso de popularidad. Finalmente, los autores pueden modificar la presentacin de documentos sin dejar las pginas ilegilbles a los usuarios.

Enlazando Hojas de estilo con HTML

Hay muchas maneras de enlazar hojas de estilo a HTML, cada una con sus ventajas y desventajas. Se han introducido nuevos elementos y atributos HTML para permitir la fcil incorporacin de hojas de estilo en documentos HTML.

Enlazndose a una hoja de estilo externa Incrustando una hoja de estilo Importacin de una hoja de estilo Estilo en lnea Atributo CLASS Atributo ID Elemento SPAN Elemento DIV Una nota acerca de validacin

Enlazndose a una hoja de estilo externa

Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:
<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="estilo de color 8-bit" MEDIA="screen, print"> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="estilo de color 24-bit" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=screen>

La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El atributo opcional TYPE se usa para especificar un tipo de medio -text/css para una hoja de estilo en cascada-- permitindole a los navegadores omitir los tipos de hoja de estilo que no soportan. Tambin es una buena idea configurar el servidor para enviar text/css como Content-type para archivos CSS.
Las hoja de estilo externas no debran contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debera consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista de
P { margin: 2em }

podra usarse como una hoja de estilo externa.

La etiqueta <LINK> tambin toma un atributo opcional MEDIA, que especifica el medio o medios en que debera aplicarse la hoja de estilo. Los valores posibles son

screen (valor por defecto), para presentacin en pantallas de computadoras no-paginadas; print, para salida a una impresora; projection, para presentaciones en proyectores; aural, para sintetizadores de voz; braille, para presentacin en dispositivos braille; tty, para pantalla en celda de caracteres (usando una fuente de inclinacin fija); tv, para televisores; all, para todos los dispositivos de salida. Medios mltiples se especifican mediante una lista separada por comas, o por el valor all.
Netscape Navigator 4.x ignora incorrectamente cualquier hoja de estilo enlazada o incrustada declarada con valores MEDIA diferentes de screen. Por ejemplo, MEDIA="screen, projection"provocar que la hoja de estilo sea ignorada por Navigator 4.x, aun si el dispositivo de presentacin es una pantalla de computadora. Navigator 4.x tambin ignora hojas de estilo declaradas conMEDIA=all.

El atributo REL se usa para definir la relacin entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si estn activas las hojas de estilo. La ausencia del atributo TITLE, como en la primera etiqueta<LINK> en el ejemplo, define un estilo persistente. Un estilo preferido es uno que se aplica automticamente, como en la segunda etiqueta <LINK> en el ejemplo. La combinacin de REL=StyleSheet y un atributo TITLE especifica un estilo preferido. Los autores no pueden especificar ms de un estilo preferido. Un estilo alterno se indica por REL="Alternate StyleSheet". La tercera etiqueta <LINK> en el ejemplo define un estilo alterno, que el usuario podra elegir para reemplazar la hoja de estilo preferido.
Note que los navegadores actuales generalmente carecen de la capacidad de elegir estilos alternos.

Un estilo simple tambin puede ser dado mediante mltiples hojas de estilo:

<LINK REL=StyleSheet HREF="basico.css" TITLE="Contemporaneo"> <LINK REL=StyleSheet HREF="tablas.css" TITLE="Contemporaneo"> <LINK REL=StyleSheet HREF="formas.css" TITLE="Contemporaneo">

En este ejemplo, tres hojas de esilo son combinadas en un estilo "Contemporaneo" que se aplica como una hoja de estilo preferido. Para combinar mltiples hojas de estilo en un estilo nico, se debe usar el mismo TITLE con cada hoja de estilo. Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas pginas. Con una hoja de estilo externo, un autor podra cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Adems, la mayora de navegadores guardan en cach las hojas de estilo externas, evitando as una demora en la presentacin una vez que la hoja de estilo se ha guardado en cach.
Microsoft Internet Explorer 3 para Windows 95/NT4 no soporta imgenes o colores de fondo (background) en BODY desde hojas de estilo enlazadas. Con este defecto, los autores podran querer tener otro mecanismo para incluir una imagen o color de fondo, como incrustando o usando el estilo en lnea, o usando el atributo BACKGROUND del elemento BODY.

Incrustando una hoja de estilo

Una hoja de estilo puede incrustarse en un documento con el elemento STYLE:

<STYLE TYPE="text/css" MEDIA=screen> <!-BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black } .nota { margin-left: 5em; margin-right: 5em } --> </STYLE>

La etiqueta <STYLE> se coloca en la cabecera HEAD del documento. El atributo requerido TYPE se usa para especificar un tipo de medio, as como su funcin con el elemento LINK. En forma similar, los atributos TITLE y MEDIA tambin pueden especificarse con STYLE. Los navegadores ms antiguos, que ignoran el elemento STYLE normalmente mostraran su contenido como si fuera

parte de BODY, haciendo as visible la hoja de estilo para el usuario. Para evitarlo, el contenido del elemento STYLE est contenido dentro de un comentario SGML (<!-- comentario -->), como en el ejemplo precedente.de arriba. Debera usarse una hoja de estilo incrustada cuando un nico documento tiene un nico estilo. Si la misma hoja de estilo se usa en mltiples documentos, entonces sera ms apropiada una hoja de estilo externa.

Importacin de una hoja de estilo

Una hoja de estilo puede ser importada con la sentencia @import de CSS. Esta sentencia puede usarse en un archivo CSS o dentro del elemento STYLE:
<STYLE TYPE="text/css" MEDIA="screen, projection"> <!-@import url(http://www.htmlhelp.com/estilo.css); @import url(/stylesheets/punk.css); DT { background: yellow; color: black } --> </STYLE>

Note que otras reglas de CSS pueden an estar incluidas en el elemento STYLE, pero todas las sentencias @import deben ocurrir al inicio de la hoja de estilo. Cualquier regla especificada en la misma hoja de estilo prevalecer sobre reglas contradictorias en las hojas de estilo importadas. Por ejemplo, inclusive si una de las hojas de estilo importadas contuviera DT { background: aqua}, los trminos de definicin an tendran un fondo amarillo. El orden en el que las hojas de estilo son importadas es importante para determinar como trabajan en cascada. En el ejemplo de arriba, si la hoja de estilo importada estilo.css especifica que los elementos STRONG se muestren en rojo y la hoja de estilo punk.css especifica que los elementos STRONG se muestren en amarillo, la ltima regla prevalecera, y los elementos STRONGseran amarillos. Las hojas de estilo importadas son tiles para fines de modularidad. Por ejemplo, un sitio puede separar diferentes hojas de estilo por los selectores usados. Puede haber una hoja de estilo simple.css que d las reglas para elementos comunes como BODY, P, H1y H2. Adems,

puede haber una hoja de estilo extra.css que de reglas para los elementos menos comnes como CODE,BLOCKQUOTE y DFN. Una hoja de estilo tablas.css puede usarse para definir reglas para elementos tabla. Estas tres hojas de estilo podran ser incluidas en documentos HTML con la sentencia @import. Las tres hojas de estilo tambin podran ser combinadas mediante el elemento LINK.

Estilo en lnea

Puede usarse estilos en lnea mediante el atributo STYLE. El atributo STYLE puede ser aplicado a cualquier elemento BODY (incluyendo el mismo BODY) excepto para BASEFONT,PARAM y SCRIPT. El atributo toma como su valor, cualquier nmero de declaraciones CSS, donde cada declaracin est separada por un punto y coma. Ejemplo:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif">Este prrafo usa estilos en rojo con la fuente New Century Schoolbook, si est disponible.</P>

Note que New Century Schoolbook est en comillas simples en el atributo STYLE, ya que las comillas dobles se usan para contener las declaraciones de estilo. El estilo en lnea es mucho ms inflexible que los otros mtodos. Para suar estilo en lnea, se debe declarar un nico lenguaje de hojas de estilo para el documento completo usando la extensin de cabecera HTTP Content-Style-Type. Con CSS en lnea, un autor debe enviar text/css como la cabecera HTTP Content-Style-Type o incluir la siguiente etiqueta en la cabecera HEAD:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Los estilos en lnea pierden muchas de las ventajas de las hojas de estilo al mezclar contenido con presentacin. As mismo, los estilos en lnea se aplican implcitamente a todos los medios, ya que no hay un mecanismo para especificar el medio deseado para un estilo en lnea. Este mtodo debera usarse con moderacin, como cuando se aplica un estilo en todos los medios para una sola ocurrencia de un elemento. Si el estilo debe aplicarse a un nico elemento pero solo con cierto medio, use el atributo ID en lugar del atributo STYLE.

Atributo CLASS

El atributo CLASS se usa para especificar la clase de estilo a la cual pertenece el elemento. Por ejemplo, la hoja de estilo puede haber creado las clases punk y advertencia:
.punk { color: lime; background: #ff80c0 } P.advertencia { font-weight: bolder; color: red; background: white }

Se podra hacer referencia a estas clases en HTML con el atributo CLASS:

<H1 CLASS=punk>Extensiones proprietarias</H1> <P CLASS=advertencia>Muchas extensiones proprietarias pueden tener efectos laterales negativos, tanto en los navegadores que las soportan como en los que no lo hacen...

En este ejemplo, la clase punk puede aplicarse a cualquier elemento BODY ya que no tiene un elemento HTML asociado con ella en la hoja de estilo. Al usar la hoja de estilo del ejemplo, la clase advertencia solo puede aplicarse al elemento P.
Una buena prctica es llamar a las clases de acuerdo a su funcin y no por su apariencia. La clase advertencia de ejemplo anterior, podra haberse llamado red (rojo), pero este nombre perdera significacin si el autor decidiera cambiar el estilo de la clase aun color diferente, o si el autor quisiera definir un estilo aural para quienes usan sintetizadores de voz.

Las clases pueden ser un mtodo muy eficaz para aplicar diferentes estilos a secciones estructuralmente idnticas de un documento HTML. Por ejemplo, esta pgina usa clases para dar un estilo diferente al cdigo CSS y al cdigo HTML.

Atributo ID

El atributo ID se usa para definir un estilo nico para un elemento. Una regla CSS como
#wdg97 { font-size: larger }

puede aplicarse en HTML mediante el atributo ID:

<P ID=wdg97>Bienvenido al Web Design Group!</P>

Cada atributo ID debe tener un valor nico a travs del documento. El valor debe ser una letra inicial seguida por letras, dgitos o guiones. Las letras solo pueden ser A-Z y a-z.
Note que HTML 4.0 permite puntos en valores del atributo ID, pero CSS1 no permite puntos en selectores ID. Note tambin que CSS1 permite los caracteres Unicode 161-255 as como los caracteres de escape Unicode como cdigos numricos, pero HTML 4.0 no permite estos caracteres en el valor de atributo ID.

El uso de ID es apropiado cuando una hoja de estilo solo necesita ser aplicada una vez en algn documento. ID contrasta con el atributo STYLE en que el primero permite estilos especficos al medio y tambin puede aplicarse a mltiples documentos (aunque slo uno en cada documento).

Elemento SPAN

El elemento SPAN fue introducido en HTML para permitir a los autores dar un estilo que no pudiera estar conectado a un elemento estructural HTML. SPAN puede usarse como un selector en una hoja de estilo, y tambin acepta los atributos STYLE, CLASS e ID. SPAN es un elemento en lnea, as que puede usarse simplemente como un elemento, tal como EM y STRONG en HTML. La gran diferencia es que mientras EM y STRONG conllevan significado estructural, SPAN no tiene tal significado. Existe solamente para aplicar estilos, y por lo tanto, no tiene efecto cuando la hoja de estilo est desactivada. Algunos ejemplos de SPAN:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Ejemplo de SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"> <!-.primeraspalabras { font-variant: small-caps } --> </STYLE> </HEAD> <BODY>

<P><SPAN CLASS=primeraspalabras>Las primeras palabras</SPAN> de un prrafo podran estar en small-caps. El estilo tambin puede estar en lnea, como para cambiar el estilo de una palabra como <SPAN STYLE="font-family: Arial"> Arial</SPAN>.</P>

Elemento DIV

El elemento DIV es similar al elemento SPAN en funcin, con la gran diferencia que DIV (abreviatura para "divisin") es un elemento de nivel bloque. DIV puede contener prrafos, encabezados, tablas, y aun otras divisiones. Esto hace ideal a DIV para hacer diferentes clases de contenedores, como captulo, resumen o nota. Por ejemplo:
<DIV CLASS=nota> <H1>Divisiones</H1> <P>El elemento DIV est definido en HTML 3.2, pero solo el atributo ALIGN est permitido en HTML 3.2. HTML 4.0 agrega los atributos CLASS, STYLE e ID , entre otros.</P> <P>Ya que DIV puede contener otros contenedores de nivel bloque, es til para hacer grandes secciones de un documento, como esta nota.</P> <P>Requiere la etiqueta de cierre.</P> </DIV>

Una nota acerca de validacin

Pocos documentos con estilos CSS se validarn en el nivel HTML 3.2 (Wilbur). HTML 3.2 no define el elemento SPAN, ni los atributos CLASS, STYLE o ID, y tambin carece de soporte para los atributos TYPE y MEDIA en los elementos LINK y STYLE. Estos elementos relacionados con estilos no son negativos para navegadores que no los soportan, ya que son ignorados en forma segura. Los documentos que usen estos elementos y atributos pueden validarse contra HTML 4.0.

Estructura y reglas de CSS

[ Sintaxis bsica | Seudo-clases y Seudo-elementos | Orden de cascada]

Sintaxis bsica
Reglas

Selectores Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente el elemento que est conectado a un estilo particular. Por ejemplo, el selector en:
P { text-indent: 3em }

es P.
Selectores de clase

Un selector sencillo puede tener diferentes clases, permitiendo as al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el cdigo en un color diferente dependiendo del idioma:
code.html { color: #191970 } code.css { color: #4b0082 }

El ejemplo de arriba ha creado dos clases, css y html para usar con el elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase de un elemento, por ejemplo,
<P CLASS=advertencia>Solo se permite una clase por selector. Por ejemplo, code.html.proprietario no es vlida.</p>

Las clases tambin pueden ser declaradas sin elementos asociados:

.nota { font-size: small }

En este caso, la clase nota puede usarse con cualquier elemento.

Una buena prctica es llamar a las clases de acuerdo a su funcin y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequea (small), pero este nombre perdera todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequea.

Selectores ID

Los selectores ID son asignados individualmente con el propsito de una definicin en trminos 'por elemento'. Este tipo de selector debera ser usado con moderacin debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podra asignarse as:
#svp94O { text-indent: 3em }

Esto sera referenciado en HTML por el atributo ID:

<P ID=svp94O>Texto con sangra 3em</P>

Selectores de contexto

Los selectores de contexto son simples cadenas de dos o ms selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrn precedencia sobre selectores simples. Por ejemplo, el selector de contexto en:
P EM { background: yellow }

es P EM. Esta regla dice que el texto con nfasis dentro del prrafo debera tener un fondo amarillo; el texto con nfasis en un encabezado no sera afectado. Declaraciones
Propiedades

Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.
Valores

El valor de declaracin es la asignacin que recibe la propiedad. Por ejemplo, la propiedad color podra recibir el valor red (rojo).
Agrupamiento

A fin de disminuir declaraciones repetitivas dentro de hojas de estilo, se permite el agrupamiento de selectores y declaraciones. Por ejemplo,

todos los encabezados en un documento podran tener idnticas declaraciones mediante un agrupamiento:
H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }

Herencia

Prcticamente todos los selectores que estn anidados dentro de selectores, heredarn los valores de propiedades asignados al selector exterior, salvo que se modifiquen de otra manera. Por ejemplo, un color definido por BODY tambin ser aplicado al texto en un prrafo. Hay algunos casos donde el selector interior no hereda los valores del selector exterior, pero stos deberan ser evidentes. Por ejemplo, la propiedad margin-top no es heredada; intuitivamente, un prrafo no tendra que tener el mismo margen superior del cuerpo del documento.
Comentarios

Los comentarios se indican dentro de hojas de estilo con las mismas convenciones usadas en la programacin C. Una muestra de comentario CSS1 tendra el siguiente formato:
/* LOS COMENTARIOS NO PUEDEN ANIDARSE */

Seudo-clases y seudo-elementos

Las seudo-clases y los seudo-elementos son "clases" y "elementos" especiales reconocidos automticamente por los navegadores que soportan CSS. Las seudo-clases distinguen entre los diferentes tipos de elementos (por ej., los enlaces visitados y los enlaces activos representan dos tipos de anclas). Los seudo-elementos se refieren a sub partes de elementos, como la primera letra de un prrafo. Las reglas con seudo-clases o seudo-elementos toman la forma
selector:seudo-clase { propiedad: valor }

o
selector:seudo-elemento { propiedad: valor }

Las seudo-clases y seudo-elementos no deberan especificarse con el atributo CLASS de HTML. Las clases normales pueden usarse con seudo-clases y seudo-elementos de la siguiente manera:
selector.clase:seudo-clase { propiedad: valor }

o
selector.clase:seudo-elemento { propiedad: valor }

Seudo-clases Ancla (Anchor)

Las seudo-clases puede asignarse al elemento A para mostrar enlaces, enlaces visitados y enlaces activos en forma diferente. El elemento ancla puede asignar a la seudo-clase link (enlace), el estado de visitada, o activa. Un enlace visitado puede definirse para representar un color diferente e inclusive un diferente tamao y estilo de fuente. Un efecto interesante podra ser tener un enlace actualmente seleccionado (o "activo") mostrado en un tamao de fuente ligeramente ms grande y de un color diferente. Entonces, cuando la pgina se vuelva a seleccionar, el enlace visitado podra mostrarse en un tamao de fuente ms pequeo y con un color diferente. La hoja de estilo de muestra podra lucir as:
A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% }

Seudo-elemento Primera lnea

Con frecuencia, en artculos de peridicos, como los del Wall Street Journal, la primera lnea de texto de un artculo se muestra en negrita y con todas las letras en maysculas. CSS1 ha incluido esta capacidad como un seudo-elemento. Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como P, H1, etc.). Un ejemplo de un seudo-elemento first-linesera:
P:first-line { font-variant: small-caps; font-weight: bold }

Seudo-elemento First letter

El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos. La primera letra de texto dentro de un selector asignado se

representar de acuerdo al valor asignado. Un seudo-elemento firstletter puede usarse en cualquier elemento de nivel de bloque. Por ejemplo:
P:first-letter { font-size: 300%; float: left }

creara una letra capital tres veces mayor que el tamao normal de fuente.
Orden de Cascada

Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. En estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalecer. Las siguientes caractersticas determinarn el resultado de hojas de estilo que se contraponen. 1. ! important Puede establecerse una regla como importante al especificar ! important. Un estilo designado como importante prevalecer sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector pueden especificar reglas importantes, la regla del autor primar sobre la regla del lector en casos de importancia. Una muestra del uso de la sentencia ! important:
BODY { background: url(bar.gif) white; background-repeat: repeat-x ! important}

2. Origen de las reglas (del autor frente a las del lector) Como ya se mencion, tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor prevalecern sobre las reglas del lector de similar peso. Tanto las hojas de estilo del autor como las del lector primarn sobre las hojas de estilo incorporadas del navegador. Los autores deberan ser cautelosos con el empleo de reglas ! important ya que primarn sobre las reglas ! important del lector. Un usuario puede, por ejemplo, necesitar de grandes tamaos de fuentes o colores especiales debido a problemas de visin, y tal usuario querr declarar que ciertas reglas de estilo sean ! important, ya que algunos estilos son vitales para que pueda leer una pgina. Cualquier

regla ! important prevalecer sobre las reglas normales, por lo que se aconseja a los autores usar reglas normales casi exclusivamente para asegurar que los usuarios con necesidades especiales de estilos puedan leer la pgina. 3. Reglas de selector: Calculando especificidad Las hojas de estilo tambin pueden primar sobre hojas de estilo en conflicto basndose en su nivel de especificidad, donde un estilo ms especfico siempre prevalecer sobre uno menos especfico. Simplemente es cuestin de contar para calcular la especificidad de un selector. a. Cuente el nmero de atributos ID en el selector. b. Cuente el nmero de atributos CLASS en el selector. c. Cuente el nmero nombres de etiquetas HTML en el selector. Finalmente, escriba los tres nmeros en orden exacto sin espacios ni comas para obtener un nmero de tres dgitos. (Nota: puede necesitar convertir los nmeros a una base mayor para terminar con tres dgitos.) La lista final de nmeros que corresponden a selectores determinar fcilmente la especificidad, donde los nmeros ms altos priman sobre los ms bajos. La siguiente es una lista de selectores ordenados por especificidad:
#id1 UL UL LI.red LI.red LI {xxx} {xxx} {xxx} {xxx} /* /* /* /* a=1 a=0 a=0 a=0 b=0 b=1 b=1 b=0 c=0 c=3 c=1 c=1 --> --> --> --> especificidad especificidad especificidad especificidad = = = = 100 013 011 001 */ */ */ */

4. Orden de especificacin Para hacerlo sencillo, cuando dos reglas tienen el mismo peso, prima la ltima regla especificada.

Propiedades CSS

Propiedades de fuentes

Font Family (Familia de fuente)

Sintaxis: Valores posibles: font-family: [[<nombre de familia> | <familia genrica>],]* [<nombre de familia> | <familia genrica>] <family-name>

Cualquier nombre de familia de fuente puede usarse

<generic-family>

serif (por ej., Times) sans-serif (por ej., Arial o Helvetica) cursive (por ej., Zapf-Chancery) fantasy (por ej., Western) monospace (por ej., Courier)

Valor inicial: Se aplica a: Heredado:

Determinado por el navegador Todos los elementos Si

Las familias de fuentes pueden asignarse por un nombre de fuente especfica o por una familia de fuentes genrica. Obviamente, si define una fuente especfica, no ser tan probable de encontrar como una familia de fuente genrica. Puede hacer mltiples asignaciones de familias, y si hace una asignacin de fuente especfica, debera ser seguida por un nombre de familia genrica en el caso de que la primera seleccin no se halle presente. Una muestra de declaracin de font-family podra ser as:

P { font-family: "New Century Schoolbook", Times, serif }

Note que las dos primeras asignaciones son fuentes de tipo especfico: New Century Schoolbook y Times. Sin embargo, ya que ambas son fuentes serif, la familia genrica est listada como un respaldo en el caso de que el sistema no tenga ninguna de las dos, sino otra fuente serif que cumpla los requisitos. Cualquier nombre de fuente que contenga un espacio en blanco deber ser entrecomillada, con comillas simples o dobles. La familia de fuente tambin puede darse con la propiedad font.

Font Style (Estilo de fuente)

Sintaxis: font-style: <valor>

Valores posibles: normal | italic | oblique Valor inicial: Se aplica a: Heredado: normal Todos los elementos Si

La propiedad font-style define que la fuente se muestre en una de tres formas: normal, itlica u oblicua (inclinada). Una hoja de estilo de muestra con declaraciones font-style podra ser as:
H1 { font-style: oblique } P { font-style: normal }

Font Variant (Variante de fuente )

Sintaxis: font-variant: <valor>

Valores posibles: normal | SMALL-CAPS Valor inicial: Se aplica a: Heredado: normal Todos los elementos Si

La propiedad font-variant determina si la fuente se muestra en maysculas tipo normal o pequeas SMALL-CAPS. Las small-caps se muestran cuando todas las letras de la palabra estn en maysculas, con caracteres ligeramente ms grandes que las minsculas. Posteriores versiones de CSS pueden soportar variantes adicionales como condensada, expandida, nmeros en small-caps u otras variantes personalizadas. Un ejemplo de una asignacin font-variant sera:
SPAN { font-variant: small-caps }

Font Weight (Peso de fuente)

Sintaxis: font-weight: <valor> Valores posibles: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Valor inicial: Se aplica a: Heredado: normal Todos los elementos Si

La propiedad font-weight se usa para especificar el peso de la fuente. Los valores bolder y lighter son relativos al peso de la fuente heredada, mientras que los otros valores son pesos de fuente absolutos.

Nota: Ya que no todas las fuentes tienen nueve posibles pesos de visualizacin, algunos de los pesos pueden agruparse en la asignacin. Si el peso especificado no est disponible, se elegir una alternativa sobre la base siguiente:

500 puede ser cambiado con 400, y viceversa 100-300 puede ser asignado al siguiente peso ms ligero, si existe, o en caso contrario, al siguiente ms oscuro 600-900 puede ser asignado al siguiente peso ms oscuro, si existe, o en caso contrario, al siguiente ms claro

Algunos ejemplos de asignacin de peso de fuente seran:

H1 { font-weight: 800 } P { font-weight: normal }

Font Size (Tamao de fuente)

Sintaxis: Valores posibles: font-size: <tamao-absoluto> | <tamao-relativo> | <longitud> | <porcentaje>

<tamao-absoluto>
o
xx-small

| x-small | small | medium | large |

x-large | xx-

large
o

<tamao-relativo> larger | smaller <longitud> <porcentaje> (en relacin al elemento padre)

Valor inicial: Se aplica a: Heredado:

medium
Todos los elementos Si

La propiedad font-size se usa para modificar el tamao de la fuente mostrada. Las longitudes absolutas (usando unidades como pt y in) deberan usarse racionalmente debido a su poca capacidad de adaptarse a diferentes ambientes de navegacin. Las fuentes con longitudes absolutas pueden ser fcilmente muy pequeas o grandes para un usuario.

Algunos ejemplos de asignacin de tamao seran:

H1 { font-size: large } P { font-size: 12pt } LI { font-size: 90% } STRONG { font-size: larger }

Los autores deben estar concientes de que Microsoft Internet Explorer 3.x aplica incorrectamente las unidades em y ex como pixels, lo que puede hacer el texto ilegible. El navegador tambin aplica incorrectamente valores de porcentaje relativos al tamao de fuente por defecto para el selector, en vez de en relacin al tamao de fuente del elemento padre. Esto hace que reglas como:
H1 { font-size: 200% }

sean peligrosas, por que el tamao ser dos veces el tamao de la fuente por defecto de IE para encabezados de nivel-uno, en lugar de dos veces el tamao de fuente del elemento padre. En este caso, BODY sera muy probablemente el elemento padre, y definira posoblemente un tamao de fuente medium, mientras que el tamao de fuente para el encabezado de nivel uno aplicado por IE probablemente sera consideradoxx-large. Considerando estos defectos, los autores deberan tener cuidado al usar valores de porcentaje para for font-size, y probablemente deberan evitar unidades em y ex para esta propiedad.

Font (Fuente)
Sintaxis: font: <valor>

Valores posibles: [<font-style> || <font-variant> || <font-weight>]? <font-size> [ / <line-height> ]? <font-family> Valor inicial: Se aplica a: Heredado: No definido Todos los elementos Si

La propiedad font puede usarse como una forma rpida para las diferentes propiedades de fuentes, as como para line height. Por ejemplo,
P { font: italic bold 12pt/14pt Times, serif }

especifica prrafos con negrita (bold) e itlica (italic), fuente Times o serif con un tamao de 12 puntos y una altura de lnea de 14 puntos.

Propiedades de color y fondo

Color
Sintaxis: color: <color>

Valor inicial: Determinado por el navegador Se aplica a: Heredado: Todos los elementos Si

La propiedad color permite especificar el color de un elemento. Vea la seccin Unidades para descripciones del valor de colores, Algunos ejemplos de reglas de color:
H1 { color: blue } H2 { color: #000080 } H3 { color: #0c0 }

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberan especificarse juntas las propiedades background y color.

Background Color (Color de fondo)

Sintaxis: background-color: <valor>

Valores posibles: <color> | transparent Valor inicial: transparent

Se aplica a: Heredado:

Todos los elementos No

La propiedad background-color establece el color del fondo de un elemento. Por ejemplo:

BODY { background-color: white } H1 { background-color: #000080 }

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre que use background-color debera especificarse background-image. En la mayora de casos, background-image: nonees adecuado. Los autores tambin pueden usar la foma rpida de la propiedad background, que est mejor soportada que la propiedad background-color.

Background Image (Imagen de fondo)

Sintaxis: background-image: <valor>

Valores posibles: <url> | none Valor inicial: Se aplica a: Heredado: none Todos los elementos No

La propiedad background-image establece la imagen de fondo de un elemento. Por ejemplo:

BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.htmlhelp.com/bg.png) }

Cuando se define una imagen de fondo (background image), tambin debera definirse un background color (color de fondo) similar para aquellos que no cargan las imgenes. Los autores tambin pueden usar la foma rpida de la propiedad background, que est mejor soportada que la propiedad background-image.

Background Repeat (Repetir fondo)

Sintaxis: background-repeat: <valor>

Valores posibles: repeat | repeat-x | repeat-y | no-repeat Valor inicial: Se aplica a: Heredado: repeat Todos los elementos No

La propiedad background-repeat determina como se repite la background image (imagen de fondo) especificada. El valor repeatx repetir la imagen horizontalmente mientras que el valorrepeaty repetir la imagen verticalmente. Por ejemplo:
BODY { background: white url(candybar.gif); background-repeat: repeat-x }

En el ejemplo de arriba, la imagen solo ser organizada en mosaico horizontal. Los autores tambin pueden usar la foma rpida de la propiedad background, que est mejor soportada que la propiedad background-repeat.

Background Attachment (Fijacin de fondo)

Sintaxis: background-attachment: <valor>

Valores posibles: scroll | fixed Valor inicial: Se aplica a: Heredado: scroll Todos los elementos No

La propiedad background-attachment determina si la background image (imagen de fondo) especificada se desplazar con el contenido o ser fija con respecto al lienzo. Por ejemplo, la lnea siguiente especifica una imagen de fondo fija:
BODY { background: white url(candybar.gif); background-attachment: fixed }

Los autores tambin pueden usar la foma rpida de la propiedad background, que est mejor soportada que la propiedad background-attachment.

Background Position (Posicin del fondo)

Sintaxis: background-position: <valor> Valores posibles: [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center | right] Valor inicial: Se aplica a: 0% 0% Elementos de nivel bloque y elementos reemplazados

Heredado:

No

La propiedad background-position da la posicin inicial de la background image (imagen de fondo) especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados. (Un elemento reemplazado es aquel del que solo se conocen las dimensiones intrnsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT, y OBJECT.) La forma ms sencilla de asignar una ubicacin de fondo es con palabras clave:

Palabras clave horizontales (left, center, right) Palabras clave horizontales verticales (top, center, bottom) Tambin pueden usarse porcentajes y longitudes para asignar la posicin de la imagen de fondo. Los porcentajes son relativos al tamao del elemento. Aunque se permiten longitudes, no se recomiendan debido a su inherente debilidad al tratar con diferentes resoluciones de pantalla. Al usar porcentajes o longitudes, la posicin horizontal se especifica primero, seguida de la posicin vertical. Un valor como 20% 65% especifica que la imagen se colocar 20% a la derecha y 65% abajo del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocar 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento. Si solo se da el valor horizontal, la posicin vertical ser 50%. Se permiten combinaciones de longitudes y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm est permitido. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave. Las palabras clave son interpretadas como sigue;

top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100%

bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% Si la imagen de fondo est fija en relacin al lienzo, la imagen es colocada en relacin al lienzo y no al elemento. Los autores tambin pueden usar la foma rpida de la propiedad background, que est mejor soportada que la propiedad background-position.

Background (Fondo)
Sintaxis: Valores posibles: Valor inicial: Se aplica a: Heredado: background: <valor> <background-color> || <background-image> || <background-repeat> || <backgroundattachment> || <background-position> No definido Todos los elementos No

La propiedad background es una forma rpida para las propiedades ms especficas relacionadas con background. Algunos ejemplos de declaraciones de background:
BODY BLOCKQUOTE P TABLE { { { { background: background: background: background: white url(http://www.htmlhelp.com/foo.gif) } #7fffd4 } url(../fondos/peon.png) #f0f8ff fixed } #0c0 url(hojas.jpg) no-repeat bottom right }

Un valor no especificado recibir el valor inicial. Por ejemplo, en las tres primeras reglas de arriba, la propiedad background-position ser establecida a 0% 0%.

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberan especificarse juntas las propiedades background y color.

Propiedades de texto

Word Spacing (Espaciamiento de palabras)

Sintaxis: word-spacing: <valor>

Valores posibles: normal | <longitud> Valor inicial: Se aplica a: Heredado: normal Todos los elementos Si

La propiedad word-spacing define una cantidad adicional de espacio entre palabras. El valor debe estar en formato de longitud; no se permiten valores negativos. Ejemplos:
P EM { word-spacing: 0.4em } P.note { word-spacing: -0.2em }

Letter Spacing (Espaciamiento de letras)

Sintaxis:

letter-spacing: <valor>

Valores posibles: normal | <longitud> Valor inicial: Se aplica a: Heredado: normal Todos los elementos Si

La propiedad letter-spacing define una cantidad adicional de espacio entre caracteres. El valor debe estar en formato de longitud; no se permiten valores negativos. Un ajuste de 0 evitar justificacin. Ejemplos:
H1 { letter-spacing: 0.1em } P.nota { letter-spacing: -0.1em }

Text Decoration (Decoracin de texto)

Sintaxis: text-decoration: <valor>

Valores posibles: none | [ underline || overline || line-through || blink ] Valor inicial: Se aplica a: Heredado: none Todos los elementos No

La propiedad text-decoration permite que el texto sea decorado mediante una de cinco propiedades: underline (subrayado), overline (lnea superior), linethrough (tachado), blink(parpadeo), o la por defecto none (ninguna).

Por ejemplo, uno puede sugerir que los enlaces no se subrayen con
A:link, A:visited, A:active { text-decoration: none }

Vertical Alignment (Alineacin vertical)

Sintaxis: vertical-align: <valor> Valores posibles: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> Valor inicial: Se aplica a: Heredado: baseline Elementos en lnea No

La propiedad vertical-align puede usarse para alterar la ubicacin vertical de un elemento en lnea, en relacin a su elemento padre o a la lnea del elemento. (Un elemento en lnea es uno que no tiene salto de lnea ni antes ni despus de l; por ejemplo, EM, A y IMG en HTML.) El valor puede ser un porcentaje relativo a la altura de lnea (lineheight) del elemento, que debera elevar la lnea de base del elemento en la cantidad especificada por encima de la lnea base del padre. No se permiten los valores negativos. El valor tambin puede ser una palabra clave. Las siguientes palabras clave afectan la ubicacin en relacin al elemento padre:

baseline (alinea lneas bases del elemento y el padre ) middle (alinea el punto medio vertical del elemento con la lnea base ms la mitad de x-height--la altura de la letra "x"--del padre) sub (subndice) super (superndice) text-top (alinea las partes superiores del elemento y la fuente del elemento padre) text-bottom (alinea las partes inferiores del elemento y la fuente del elemento padre) Las palabras clave que afectan la ubicacin relativa a la lnea del elemento son

top (alinea la parte superior del elemento con el elemento ms alto en la lnea) bottom (alinea la parte inferior del elemento con el elemento ms bajo en la lnea) La propiedad vertical-align es particularmente til para alinear imgenes. Algunos ejemplos:
IMG.middle { vertical-align: middle } IMG { vertical-align: 50% } .exponente { vertical-align: super }

Text Transformation (Transformacin de texto)

Sintaxis: text-transform: <valor> Valores posibles: none | Capitalize | UPPERCASE | lowercase Valor inicial: Se aplica a: Heredado: none Todos los elementos Si

La propiedad text-transform permite que el texto se transforme por alguna de cuatro propiedades:

Capitalize (escribe en maysculas el primer carcter de cada palabra) UPPERCASE (escribe en maysculas todos los caracteres de cada palabra) lowercase (usa letras pequeas para todos los caracteres de cada palabra) none (valor inicial) Ejemplos:
H1 { text-transform: uppercase } H2 { text-transform: capitalize }

La propiedad text-transform solo debera usarse para expresar un deseo estilstico. Sera inapropiado, por ejemplo, usar text-transform para aplicar maysculas a las primera letras de una lista de pases o nombres.

Text Alignment (Alineacin de texto)

Sintaxis: text-align: <valor>

Valores posibles: left | right | center | justify Valor inicial: Se aplica a: Heredado: Determinado por el navegador Elementos de nivel bloque Si

La propiedad text-align puede aplicarse a elementos de nivel bloque (P, H1, etc.) para dar la alineacin del texto del elemento. Esta propiedad es similar en funcin al atributo ALIGN de HTML en prrafos, encabezados y divisiones. Algunos ejemplos:
H1 { text-align: center } P.diario { text-align: justify }

Text Indentation (Sangra de texto)

Sintaxis: text-indent: <valor>

Valores posibles: <longitud> | <porcentaje> Valor inicial: Se aplica a: 0 Elementos de nivel bloque

Heredado:

Si

La propiedad text-indent puede aplicarse a elementos de nivel bloque (P, H1, etc.) para definir la cantidad de sangra que debera aplicarse a la primera lnea. El valor debe ser una longitud o unporcentaje; los porcentajes se refieren al ancho del elemento padre. Un uso comn para text-indent sera dar sangra a un prrafo:
P { text-indent: 5em }

Line Height (Altura de lnea)

Sintaxis: line-height: <valor>

Valores posibles: normal | <nmero> | <longitud> | <porcentaje> Valor inicial: Se aplica a: Heredado: normal Todos los elementos Si

La propiedad line-height aceptar un valor para controlar el espacio entre lneas base de texto. Si el valor es un nmero, la altura de lnea se calcula multiplicando el tamao de fuente del elemento por el nmero. Los valores en porcentaje son relativos al tamao de fuente del elemento. No se permiten los valores negativos. La altura de lnea tambin puede darse en la propiedad font junto con un tamao de fuente. La propiedad line-height podra usarse para texto a doble espacio:
P { line-height: 200% }

Microsoft Internet Explorer 3.x trata incorrectamente a los valores numricos y a los valores con unidades em o ex como valores de pixel. Este error puede hacer ilegibles las pginas, por lo que los autores deberan evitar provocarlo; con frecuencia, las unidades de porcentaje son una buena opcin.

Propiedades de cuadros

Top Margin (Margen superior)

Sintaxis: margin-top: <valor>

Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: Se aplica a: Heredado: 0 Todos los elementos No

La propiedad margin-top establece el margen superior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten mrgenes negativos. Por ejemplo, la siguiente regla eliminara el margen superior de un documento:
BODY { margin-top: 0 }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Right Margin (Margen derecho)

Sintaxis: margin-right: <valor>

Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: Se aplica a: Heredado: 0 Todos los elementos No

La propiedad margin-right establece el margen derecho de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten mrgenes negativos. Ejemplo:
P.estrecho { margin-right: 50% }

Note que los mrgenes horizontales contiguos no son contrados.

Bottom Margin (Margen inferior)

Sintaxis: margin-bottom: <valor>

Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: Se aplica a: 0 Todos los elementos

Heredado:

No

La propiedad margin-bottom establece el margen inferior de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten mrgenes negativos. Ejemplo:
DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Left Margin (Margen izquierdo)

Sintaxis: margin-left: <valor>

Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: Se aplica a: Heredado: 0 Todos los elementos No

La propiedad margin-left establece el margen izquierdo de un elemento especificando una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten mrgenes negativos. Ejemplo:
ADDRESS { margin-left: 50% }

Note que los mrgenes horizontales contiguos no son contrados.

Margin (Margen)
Sintaxis: margin: <valor>

Valores posibles: [ <longitud> | <porcentaje> | auto]{1,4} Valor inicial: Se aplica a: Heredado: No definido Todos los elementos No

La propiedad margin establece los mrgenes de un elemento especificando entre uno y cuatro valores, donde cada valor es una longitud, un porcentaje o auto. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten mrgenes negativos. Si se dan cuatro valores, se aplican a los mrgenes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto. Ejemplos de declaraciones margin incluyen:
BODY { margin: 5em } P { margin: 2em 4em } /* todos los mrgenes 5em */ /* mrgenes superior e inferior 2em, mrgenes izquierdo y derecho 4em

*/ DIV { margin: 1em 2em 3em 4em } /* margen superior 1em, right margin 2em, bottom margin 3em, left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Los mrgenes horizontales no son contrados. Usando la propiedad margin se pueden establecer todos los mrgenes; alternativamente, pueden usarse las propiedades margin-top, marginbottom, margin-left y margin-right.

Top Padding (Relleno superior)

Sintaxis: padding-top: <valor>

Valores posibles: <longitud> | <porcentaje> Valor inicial: Se aplica a: Heredado: 0 Todos los elementos No

La propiedad padding-top describe cuanto espacio colocar entre el borde superior y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Right Padding (Relleno derecho)

Sintaxis: padding-right: <valor>

Valores posibles: <longitud> | <porcentaje> Valor inicial: Se aplica a: Heredado: 0 Todos los elementos No

La propiedad padding-right describe cuanto espacio colocar entre el borde derecho y el contenido del selector. El valor puede ser

una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Bottom Padding (Relleno inferior)

Sintaxis: padding-bottom: <valor>

Valores posibles: <longitud> | <porcentaje> Valor inicial: Se aplica a: Heredado: 0 Todos los elementos No

La propiedad padding-bottom describe cuanto espacio colocar entre el borde inferior y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Left Padding (Relleno izquierdo)

Sintaxis: padding-left: <valor>

Valores posibles: <longitud> | <porcentaje> Valor inicial: Se aplica a: 0 Todos los elementos

Heredado:

No

La propiedad padding-left describe cuanto espacio colocar entre el borde izquierdo y el contenido del selector. El valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos.

Padding (Relleno)
Sintaxis: padding: <valor>

Valores posibles: [ <longitud> | <porcentaje>]{1,4} Valor inicial: Se aplica a: Heredado: 0 Todos los elementos No

La propiedad padding es una manera rpida de aplicar las propiedades padding-top, padding-right, padding-bottom y paddingleft. El padding de un elemento es la cantidad de espacio entre el borde y el contenido del elemento. Se dan entre uno y cuatro valores, donde cada valor puede ser una longitud o un porcentaje. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten los valores negativos. Si se dan cuatro valores, se aplican a los rellenos superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Por ejemplo, la siguiente regla establece el padding superior a 2em, el derecho a 4em, el inferior a 5em y el izquierdo a 4em:
BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width (Ancho de borde superior)

Sintaxis: border-top-width: <valor>

Valores posibles: thin | medium | thick | <longitud> Valor inicial: Se aplica a: Heredado: medium Todos los elementos No

La propiedad border-top-width se usa para especificar el ancho del borde superior de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamao de fuente olongitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos. Tambin se pueden usar las propiedades border-top, border-width, o la forma rpida border.

Right Border Width (Ancho de borde derecho)

Sintaxis:

border-right-width: <valor>

Valores posibles: thin | medium | thick | <longitud> Valor inicial: Se aplica a: Heredado: medium Todos los elementos No

La propiedad border-right-width se usa para especificar el ancho del borde derecho de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamao de fuente olongitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos. Tambin se pueden usar las propiedades border-right, border-width, o la forma rpida border.

Bottom Border Width (Ancho de borde inferior)

Sintaxis: border-bottom-width: <valor>

Valores posibles: thin | medium | thick | <longitud> Valor inicial: Se aplica a: Heredado: medium Todos los elementos No

La propiedad border-bottom-width se usa para especificar el ancho del borde inferior de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamao de fuente olongitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos. Tambin se pueden usar las propiedades border-bottom, border-width, o la forma rpida border.

Left Border Width (Ancho de borde izquierdo)

Sintaxis: border-left-width: <valor>

Valores posibles: thin | medium | thick | <longitud> Valor inicial: Se aplica a: Heredado: medium Todos los elementos No

La propiedad border-left-width se usa para especificar el ancho del borde izquierdo de un elemento. El valor puede ser una de tres palabras clave, que no son afectadas por tamao de fuente olongitud, que pueden usarse para obtener anchos relativos. No se permiten los valores negativos. Tambin se pueden usar las propiedades border-left, border-width, o la forma rpida border.

Border Width (Ancho de borde)

Sintaxis: border-width: <valor>

Valores posibles: [ thin | medium | thick | <longitud> ]{1,4} Valor inicial: Se aplica a: Heredado: No definido Todos los elementos No

La propiedad border-width se usa para establecer el ancho de borde de un elemento especificando entre uno y cuatro valores, donde cada valor es una palabra clave o una longitud. No se permiten los valores negativos. Si se dan cuatro valores, se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto. Esta propiedad es una forma rpida de las propiedades border-topwidth, border-right-width, border-bottom-width y border-left-width. Tambin puede usarse la propiedad rpida border.

Border Color (Color de borde)

Sintaxis: border-color: <valor>

Valores posibles: <color>{1,4}

Valor inicial: Se aplica a: Heredado:

El valor de la propiedad color Todos los elementos No

La propiedad border-color establece el color del borde de un elemento. Se especifican entre uno y cuatro valores de color. Si se dan cuatro valores, se aplican a los colores de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto. Tambin puede usarse la propiedad rpida border.

Border Style (Estilo de borde)

Sintaxis: border-style: <valor>

Valores posibles: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} Valor inicial: Se aplica a: Heredado: none Todos los elementos No

La propiedad border-style establece el estilo del borde de un elemento. Esta propiedad debe ser especificada para que el borde sea visible. Se especifican entre una y cuatro palabras clave. Si se dan cuatro valores, se aplican a los estilos de borde superior, derecho, inferior e izquierdo, respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores faltantes se toman del lado opuesto.

Tambin puede usarse la propiedad rpida border.

Top Border (Borde superior)

Sintaxis: border-top: <valor>

Valores posibles: <border-top-width> || <border-style> || <color> Valor inicial: Se aplica a: Heredado: No definido Todos los elementos No

La propiedad border-top es una forma rpida para establecer el ancho, estilo y el color del borde superior de un elemento. Note que solo puede darse un valor de border-style. One may also use the border shorthand property.

Right Border (Borde derecho)

Sintaxis: border-right: <valor>

Valores posibles: <border-top-width> || <border-style> || <color> Valor inicial: No definido

Se aplica a: Heredado:

Todos los elementos No

La propiedad border-right es una forma rpida para establecer el ancho, estilo y el color del borde derecho de un elemento. Note que solo puede darse un valor de border-style. Tambin puede usarse la propiedad rpida border.

Bottom Border (Borde de fondo)

Sintaxis: border-bottom: <valor>

Valores posibles: <border-bottom-width> || <border-style> || <color> Valor inicial: Se aplica a: Heredado: No definido Todos los elementos No

La propiedad border-bottom es una forma rpida para establecer el ancho, estilo y el color del borde inferior de un elemento. Note que solo puede darse un valor de border-style. Tambin puede usarse la propiedad rpida border.

Left Border (Borde izquierdo)

Sintaxis:

border-left: <valor>

Valores posibles: <border-left-width> || <border-style> || <color> Valor inicial: Se aplica a: Heredado: No definido Todos los elementos No

La propiedad border-left es una forma rpida para establecer el ancho, estilo y el color del borde izquierdo de un elemento. Note que solo puede darse un valor de border-style. Tambin puede usarse la propiedad rpida border.

Border (Borde)
Sintaxis: border: <valor>

Valores posibles: <border-width> || <border-style> || <color> Valor inicial: Se aplica a: Heredado: No definido Todos los elementos No

La propiedad border es una forma rpida para establecer el ancho, estilo y el color del borde izquierdo de un elemento.

Ejemplos de declaraciones border incluyen:

H2 A:link A:visited A:active { { { { border: border: border: border: groove 3em } solid blue } thin dotted #800080 } thick double red }

La propiedad border solo puede establecer todos los cuatro bordes; puede aplicar solo un ancho y estilo de borde. Para dar diferentes valores a los cuatro bordes de un elemento, se deben usar una o ms de las propiedades border-top, border-right, border-bottom, borderleft, border-color, border-width, border-style, border-topwidth, border-right-width, border-bottom-width, o border-leftwidth.

Width (Ancho)
Sintaxis: width: <valor>

Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: Se aplica a: Heredado: auto Elementos de nivel bloque y elementos reemplazados No

A cada elemento de nivel bloque o elemento reemplazado se le puede dar un ancho width, especificado como una longitud, un porcentaje o como auto. (Un elemento reemplazado es uno del que solo se conocen las dimensiones intrnsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT y OBJECT.) El valor inicial para la propiedad width esauto, lo que resulta en el ancho intrnseco del elemento (es decir, el ancho del elemento mismo, como por ejemplo el ancho de una imagen). Los porcentajes se refieren al ancho del elemento padre. No se permiten los valores negativos.

Esta propiedad podra usarse para dar un ancho comn a algunos elementos INPUT, como los botones SUBMIT y RESET:
INPUT.boton { width: 10em }

Height (Altura)
Sintaxis: height: <valor>

Valores posibles: <longitud> | auto Valor inicial: Se aplica a: Heredado: auto Elementos de nivel bloque y elementos reemplazados No

A cada elemento de nivel bloque o elemento reemplazado se le puede dar una altura height, especificada como una longitud o como auto. (Un elemento reemplazado es uno del que solo se conocen las dimensiones intrnsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT y OBJECT.) El valor inicial para la propiedad width es auto, lo que resulta en el ancho intrnseco del elemento (es decir, el ancho del elemento mismo, como por ejemplo el ancho de una imagen). No se permiten longitudes negativos. Como con la propiedad width, height puede usarse para escalar una imagen:
IMG.foo { width: 40px; height: 40px }

En la mayora de los casos, se recomienda a los autores escalar la imagen en un programa de edicin de imgenes, ya que los navegadores probablemente no escalarn las imgenes con alta calidad, y ya que la escala reducida origina que el usuario descargue un archivo innecesariamente grande. Sin embargo, escalar mediante las

propiedades width y height es un opcin til para hojas de estilo definidas por el usuario a fin de superar problemas de visin.

Float (Flotar)
Sintaxis: float: <valor>

Valores posibles: left | right | none Valor inicial: Se aplica a: Heredado: none Todos los elementos No

La propiedad float permite ajustar texto alrededor de un elemento. Esto es idntico en propsito a ALIGN=left y ALIGN=right para el elemento IMG de HTML 3.2, pero CSS1 permite que todos los elementos "floten," no solo las imgenes y tablas que permite HTML 3.2.

Clear (Despejar)
Sintaxis: clear: <valor>

Valores posibles: none | left | right | both Valor inicial: Se aplica a: none Todos los elementos

Heredado:

No

La propiedad clear especifica si un elemento permite elementos flotantes a sus lados. Un valor left mueve el elemento debajo de cualquier elemento flotante a su izquierda; right acta en forma similar para elementos flotantes a la derecha. Otros valores son none, que es el valor inicial, y both, que mueve el elemento debajo de los elementos flotantes a ambos lados. Esta propiedad es similar en funcin a <BR CLEAR=left|right|all|none> de HTML 3.2, pero puede aplicarse a todos los elementos.

Propiedades de clasificacin

Display (Visualizacin)
Sintaxis: display: <valor> Valores posibles: block | inline | list-item | none Valor inicial: Se aplica a: Heredado: block Todos los elementos No

La propiedad display se usa para definir un elemento con uno de cuatro valores:

block (un salto de lnea antes y despus del elemento) inline (ningn salto de lnea antes ni despus del elemento) list-item (igual que block, salvo que se agrega un marcador de tems de lista) none (sin visualizacin)

A cada elemento tpicamente se le da un valor de display (visualizacin) por defecto para el navegador, basado en la interpretacin sugerida en la especificacin HTML. La propiedad display puede ser peligrosa debido a su capacidad de mostrar elementos en lo que de otro modo sera un formato inapropiado. El uso del valor none desactivar la visualizacin del elemento al que est asignado, incluyendo cualquier elemento hijo.

Whitespace (Espacio en blanco)

Sintaxis: white-space: <valor> Valores posibles: normal | pre | nowrap Valor inicial: Se aplica a: Heredado: normal Elementos de nivel bloque Si

La propiedad white-space determinar cmo se tratan los espacios dentro del elemento. Esta propiedad toma uno de tres valores:

normal (contrae mltiples espacios en uno) pre (no contrae mltiples espacios) nowrap (no permite el ajuste de lnea sin una etiqueta <BR>)

List Style Type (Tipo de estilo de lista)

Sintaxis: Valores posibles: Valor inicial: Se aplica a: list-style-type: <valor> disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none disc Elementos con la propiedad display list-item

Heredado:

Si

La propiedad list-style-type especifica el tipo de marcador de tems de lista, y se usa si list-style-image es none o si la carga de imgenes est desactivada. Ejemplos:
LI.cuadrado UL.simple { OL { OL OL { OL OL OL { { list-style-type: square } list-style-type: none } list-style-type: upper-alpha } list-style-type: decimal } list-style-type: lower-roman }

/* A B C D E etc. */ /* 1 2 3 4 5 etc. */ /* i ii iii iv v etc. */

List Style Image (Imagen de estilo de lista)

Sintaxis: list-style-image: <valor>

Valores posibles: <url> | none Valor inicial: Se aplica a: Heredado: none Elementos con la propiedad display list-item Si

La propiedad list-style-image especifica la imagen que se usar como marcador de tems de lista cuando se active la carga de imgenes, reemplazando al marcador especificado en la propiedadlist-style-type. Ejemplos:
UL.marca { list-style-image: url(/LI-marcadores/visto.gif) } UL LI.x { list-style-image: url(x.png) }

List Style Position (Posicin de estilo de lista)

Sintaxis: list-style-position: <valor>

Valores posibles: inside | outside Valor inicial: Se aplica a: Heredado: outside Elementos con la propiedad display list-item Si

La propiedad list-style-position toma el valor inside o outside, donde outside es el valor por defecto. Esta propiedad determina donde se coloca el marcador en relacin al tem de lista. Si se usa el valor inside, las lneas se ajustarn debajo del marcador en vez de estar con sangra. Ejemplo:
Posicin exterior (outside): * Item de lista 1 segunda lnea de tem de la lista Posicin interior (inside): * Item de lista 1 segunda lnea de tem de la lista

List Style (Estilo de lista)

Sintaxis: list-style: <valor>

Valores posibles: <list-style-type> || <list-style-position> || <url>

Valor inicial: Se aplica a: Heredado:

No definido Elementos con la propiedad display list-item Si

La propiedad list-style property es una forma rpida de las propiedades list-style-type, list-style-position y list-style-image. Ejemplos:
LI.cuadrado { list-style: square inside } UL.simple { list-style: none } UL.marca { list-style: url(/LI-marcadores/visto.gif) circle } OL { list-style: upper-alpha } OL OL { list-style: lower-roman inside }

Unidades

Unidades CSS
[ Unidades de longitud | Unidades de porcentaje | Unidades de color | URLs ]

Unidades de longitud

Un valor de longitud se forma por un signo + o - opcional, seguido de un nmero y de una abreviacin de dos letras que indica la unidad. No hay espacios en un valor de longitud; por ej., 1.3 emno es un valor de longitud vlido, pero 1.3em si lo es. Una longitud de 0 no necesita las dos letras para identificar la unidad.

Tanto las unidades de longitud relativas y absolutas estn soportadas en CSS1. Las unidades relativas dan una longitud relativa a otra propiedad longitud, y se prefieren ya que se ajustarn mejor a medios diferentes. Las siguientes unidades relativas estn disponibles:

em (ems, la altura de la fuente de los elementos) ex (x-height, altura de la letra "x") px (pixels, relativa a la resolucin del lienzo) Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos tiles que las unidades relativas. Las siguientes unidades absolutas estn disponibles:

in (pulgadas; 1 pulgada=2.54 cm) cm (centmetros; 1 cm = 10 mm) mm (milmetros) pt (puntos; 1pt = 1/72 pulgada) pc (picas; 1 pc = 12 pt)

Unidades de porcentaje

Un valor de porcentaje se forma por un signo + o - opcional, seguido de un nmero y de %. No hay espacios en un valor de porcentaje. Los valores de porcentaje son relativos a otros, tal como estn definidos en cada propiedad. Generalmente, el valor de porcentaje es relativo al tamao de fuente del elemento.

Unidades de color

Un valor de color es una palabra clave o una especificacin numrica RGB. Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrn, azul marino, olivo, morado, rojo, plata, turquesa, blanco, yamarillo.

Los colores RGB se dan en una de cuatro maneras:

#rrggbb (por ej., #00cc00) #rgb (por ej., #0c0) rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0)) rgb(y%,y%,y%) donde y es un nmero entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%)) Los ejemplos de arriba especifican el mismo color. Douglas R. Jacobson tambin ha dearrollado una prctica Carta de colores RGB de referencia rpida (61 kB).

URLs

Un valor URL es dado por url(foo), donde foo es la URL. La URL puede ser opcionalmente entrecomillada con comillas simples (') o dobles (") y puede contener espacios en blanco antes o despus de la URL (opcionalmente entrecomillada). Los parntesesis, comas, espacios, comillas simples o dobles en una URL deben ser encerradas con diagonales invertidas. Las URLs parciales son interpretadas en relacin a la fuente de la hoja de estilo, no a la fuente de HTML.
Note que Netscape Navigator 4.x interpreta incorrectamente las URLs parciales relativas a la fuente HTML. Teniendo en cuenta este defecto, los autores pueden preferir usar las URLs completas siempre que sea posible.

Ejemplos:
BODY { background: BODY { background: BODY { background: BODY { background: BODY { background: encerradas */ url(stripe.gif) } url(http://www.htmlhelp.com/stripe.gif) } url(stripe.gif) } url("stripe.gif") } url(\"Ulalume\".png) } /* comillas en URL

Posiciones de las cajas con CSS

Esttica, relativa, absoluta y fija
Esttica
La posicin esttica ("static") es la posicin que tienen por defecto todas las cajas en HTML. Significa que su colocacin en la pantalla ser la que indique el flujo del documento, es decir, donde le corresponda estar en el momento que aparece en el cdigo, que en general vendr determinado por los elementos que le preceden. Si ninguna otra propiedad altera este estado (como los mrgenes, por ejemplo), la caja ocupar sencillamente el lugar que le corresponde en el flujo del cdigo. HTML: <div id="uno"></div> <div id="dos"></div> CSS: #uno, #dos {width: 100px; height: 100px;} #uno {background-color: #00f;} #dos {background-color: #f00;}

Relativa
La posicin relativa de una caja, que se asigna en la hoja de estilo mediante la propiedad "position: relative", nos permitir entre otras cosas desplazar esa caja con arreglo a cuatro parmetros: top, right, bottom y left (arriba, derecha, abajo e izquierda). Estos desplazamientos son referentes a la posicin natural de la caja en el flujo del documento, y admiten tanto valores positivos como negativos. De manera que si colocamos una caja seguida de otra en el HTML, y por tanto esta segunda queda justo debajo de la primera en vertical, y quisiramos que la segunda montara 40px sobre la primera, podramos hacerlo de esta manera: HTML:

<div id="tres"></div> <div id="cuatro"></div> <div id="cinco"></div> aplicamos en la hoja de estilo: #tres, #cuatro, #cinco {width: 100px;

height: 100px; } #tres {background-color: #00f;} #cuatro {background-color: #f00; position: relative; top: -40px; left: 40px; } #cinco {background-color: #0f0;}

con lo que la segunda caja se ver desplazada 40px hacia arriba (top: -40px) y 40px a la derecha (left: 40px) con arreglo a la posicin natural que le correspondera (pegada a la caja superior), y por lo tanto montar sobre la primera 40px. Pero adems observamos algo importante: para el flujo del documento, la caja desplazada es como si no lo hubiera sido, porque sigue ocupando el mismo espacio que si no la hubiramos desplazado, por lo que la tercera caja ocupa su lugar natural en el flujo como si la segunda caja siguiera en su sitio. Esto nos puede resolver infinidad de situaciones en las que queremos colocar elementos con mucha precisin, y no precisamente en el lugar exacto que les corresponde por el flujo del documento.

Absoluta
La segunda manera de colocar cosas a nuestro antojo en la pgina sera mediante la posicin absoluta (position: absolute). La posicin absoluta tambin es colocada con arreglo a los cuatro parmetros descritos antes (arriba, derecha, abajo e izquierda), pero en este caso no sern desplazamientos con respecto a su posicin natural, sino a las cuatro coordenadas de la pgina. As, si queremos colocar una caja en las esquina inferior derecha de la pantalla, utilizaremos: #derecha {position: absolute; bottom: 0; right: 0; width: 50px; height: 50px; background-color: #f00; }

con lo que la caja ser colocada a 0px de la parte inferior y 0px de la derecha de la pgina. No hay que olvidar algo crucial: las coordenadas de un elemento en posicin absoluta se medirn con respecto a la caja que lo contenga, siempre que sta a su vez tenga definida una posicin relativa o absoluta, y en defecto de estas, a la pgina completa o elemento padre "html". Hacemos hincapi porque esto es origen de muchas confusiones a la hora de maquetar. Si tenemos una caja de 400px por 400px (por ejemplo), con posicin relativa, e introducimos dentro de ella otra caja con posicin absoluta y las coordenadas anteriores (bottom: 0; right: 0;), esta segunda caja se colocar en la esquina inferior derecha de la primera caja, no de la pgina completa, porque al estar dentro de una caja con posicin relativa, las coordenadas de ubicacin se tomarn con respecto a la primera caja (padre de la segunda). Slo con quitar la posicin relativa de la primera caja, la segunda saltara a la esquina inferior derecha de la pgina. Ver ejemplo

Otra cosa a tener en cuenta de los elementos con posicin absoluta es que no ocupan espacio fsico real en el flujo del documento, as que, por un lado, una caja con esas caractersticas podr ser colocada sobre cualquier otro elemento dentro del documento sin que ste se vea alterado en su posicin, y por otro, si despus de poner una caja con posicin absoluta ponemos otra sin ella, esta segunda ocupar el espacio fsico que le hubiera correspondido a la primera, ya que la primera no ocupa espacio, que queda disponible para otro elemento.

Fija
La posicin fija (position: fixed) sirve para colocar una caja en la ventana y que no se mueva de su pociin al hacer scroll, al estilo de los "frames". Funciona como la posicin absoluta, en cuanto a que se indica su colocacin mediante las coordenadas top, right, bottom y left, pero a diferencia de la absoluta, siempre sus coordenadas correspondern al area de visin (la pantalla completa), nunca a una caja que la contenga.

Ejemplo caja fija

El principal problema al usar las cajas fijas es que IE6 no entiende esta propiedad, por lo que tendremos que inventarnos una filigrana que nos permita simular el efecto de "position: fixed" y que sea compatible con todos los navegadores. Como veremos en el cdigo del ejemplo, el truco est en ocultar el scroll de la ventana poniendo un "overflow: hidden" a los selectores de las etiquetas html y body (html, body {...}), crear un contenedor que ocupe el 100% de alto y ancho, que ser el que tenga el scroll con "overflow: auto", y colocar con posicin absoluta la caja que queramos poner con posicin fija. El cdigo CSS a usar sera este: * {margin:0; padding:0;} html, body {width:100%; height:100%; overflow:hidden; } #contenido {width:100%; height:100%; overflow: auto; } #fijo { position:absolute; width:200px; height:200px; background:#cff; left:0; top:0; } aplicado al HTML: <div id="contenido"> <p>Texto texto texto texto...</p> </div> <div id="fijo">Fijo</div>

Y esto es lo bsico que se necesita saber sobre las posiciones de las cajas para empezar a maquetar con CSS. Luego ya se puede profundizar bastante en todo esto y hay mil cosas diferentes para hacer, pero sern ya la prctica y las horas de vuelo las que nos vayan enseando todos los truquillos sobre las cajas, CSS y los navegadores. Saludos