CSS, hojas de estilos - Manual completo Página 1 de 36

CSS, hojas de estilos

Manual por: DesarrolloWeb.com Versión on-line:

"Tu mejor ayuda para aprender a hacer webs" http://www.desarrolloweb.com/manuales/2

Introducción a las CSS

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque
fué concebido para otros usos (científicos sobretodo), distinto a los actuales, mucho más
amplios.

Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización
de tablas imagenes transparentes para ajustarlas, utilización de etiquetas que no son estádares
del HTML y otras. Estas "trampas" han causado a menudo problemas en las páginas a la hora
de su visualizaciónen distintas plataformas.

Además, los diseñadores se han visto frustrados por la dificultad con la que, aun utilizando
estos trucos, se encontraban a la hora de maquetar las páginas, ya que muchos de ellos venian
maquetando páginas sobre el papel, donde el control sobre la forma del documento es absoluto.

Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología consiste
en que las páginas web tienen mezclado en su código HTML el contenido del documento con las
etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del
código HTML se hece pesada y difícil a la hora de buscar errores o depurar las páginas. Aunque,
desde el punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de
almacenar su contenido, es un gran problema que estos textos estáen mezclados con etiquetas
incrustadas para dar forma a estos: se degrada su utilidad.

En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico para
que en pocos capítulos podáis usar las CSS de una manera depurada, reflejando toda nuestra
experiencia en su uso. No pretendendemos explorar todos los aspectos de la tecnología ya que
para realizar esto necesitariamos un la extensión de un libro entero.

Características y ventajas de las CSS

El modo de fucionamiento de las CSS consiste en definir, mediante una sintaxis especial, la
forma de presentación que le aplicaremos a:

Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.

Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código
en la cabecera, a toda la página.

Una porción del documento, aplicando estilos visibles en un trozo de la página.

Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para
una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra
programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul,
con margenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta
sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el
HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para
conseguir nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir

02/03/2005
CSS, hojas de estilos - Manual completo Página 2 de 36

esta forma:

Podemos definir la distancia entre líneas del documento.

Se puede aplicar identado a las primeras líneas del párrafo.

Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.

Y mucho más, como definir la visibilidad de los elementos, margenes, subrayados,
tachados...

Y seguimos mostrandoos ventajas, ya que si con el HTML tan sólo podíamos definir atributos en
las páginas con pixeles y porcentajes, ahora podemos definir utilizando muchas más unidades
como:

Pixels (px) y porcentaje (%), como antes.

Pulgadas (in)

Puntos (pt)

Centímetros (cm)

Navegadores que lo soportan

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En
concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a
partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS. Además cabe
destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos,
por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas.

Esto quiere decir que debemos de usar esta tecnología con cuidado, ya que muchos usuarios no
podrán ver los formatos que apliquemos a las páginas con CSS. Así pues, utilizad las hojas de
estilos cuando estas no vayan a suponer un problema.

Usos de las CSS I

Vamos ahora a describir los diferentes usos de las CSS introducidos CSS tiene una sintaxis propia, la
en el anterior capítulo. Vamos por orden, describiendo los puntos veremos a través de ejemplos.

según su dificultad e importancia. Luego se verá con detalle

Hemos partido este capítulo en dos partes por su extensión y por haber varias formas distintas
de aplicar estilos, aquí veremos las más sencillas y en el capítulo siguiente otras más
complicadas pero más potentes.

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su
atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un
ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color
verde.

<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil.
</p>

Que tiene como resultado:

Esto es un párrafo con varias palabras en color verde. resulta muy fácil.

Estilo definido para una etiqueta

02/03/2005
CSS, hojas de estilos - Manual completo Página 3 de 36

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por
ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello
utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y
cuando dispongamos de un navegador compatible con CSS).

<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Que tiene como resultado:

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.

Estilo definido en una parte de la página

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el
atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

<div style="color:#000099; font-weight:bold">

<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Que tiene como resultado:

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilos

Hasta aquí este capítulo, en el siguiente seguiremos viendo formas más avanzadas de usar las
CSS.

Usos de las CSS y II

Estilo definido para toda una página

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la
página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos
estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que
apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos
de una sola vez.

Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más
avanzada. Pero no te preocupes puesto que con los ejemplos irás aprendiendo su uso y más
tarde comentaremos la sintaxis en profundidad.

En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la página

para definir los distintos estilos del documento.

A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que

02/03/2005
CSS, hojas de estilos - Manual completo Página 4 de 36

queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de
estilos.

<html>
<head>
<title>Ejemplo de estilos para toda una p&aacute;gina</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>

<body>
<h1>P&aacute;gina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p>
</body>
</html>

Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará

Subrallado

Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <BODY>) se
le apliquen los estilos siguientes:

Color del texto negro

Color del fondo grisaceo

Margen lateral de 1 centímetro

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos serán heredados por el
resto de las etiquetas del documento. Esto es así siempre y cuando no se vuelvan a definir esos
estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta será el
que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya
fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>,
que es más concreta.

Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos:
<!--Declaración de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos,
que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la página. Si no se
pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirían ese "feo código" en la
página.

Pulsa para ver el ejemplo anterior

[http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos4/todapagina.html].

Hemos preparado la misma página, pero con declaraciones de estilos distintas, para que
comprobéis las diferencias en la forma del documento con sólo unos cambios en sus estilos.
Puedes verla pinchando aquí
[http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos4/todapagina2.html].

Estilo definido para todo un sitio web

Una de las características más potentes de la programación con hojas de estilos consiste en
que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un
archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas
las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma
declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Con las

02/03/2005
CSS, hojas de estilos - Manual completo Página 5 de 36

ventajas añadidas de que se ahorra en líneas de código HTML (lo que reduce el peso del
documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se
comentó anteriormente.

Veamos ahora cómo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquer extensión, aunque le podemos asignar
la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser
escrito exclusivamente en sintaxis CSS, es decir, sería erroneo incluir código HTML en el:
etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}

H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}

TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}

BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Enlazamos la pána web con la hoja de estilos

Para ello, vamos a colocar la etiqueta <LINK> con los atributos

rel="STYLESHEET" indicando que el enlace es con una hoja de estilos

type="text/css" porque ela archivo es de texto, en sintaxis CSS

href="estilos.css" indica el nombre del fichero fuente de los estilos

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>P&aacute;gina que lee estilos</title>
</head>

<body>
<h1>P&aacute;gina que lee estilos</h1>
Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy
f&aacute;cil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto est&aacute; dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>

02/03/2005
CSS, hojas de estilos - Manual completo Página 6 de 36

</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>

</body>
</html>

El resultado conseguido se puede ver aquí

[http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos4/leeestilos.html]

Reglas de importancia en los estilos

Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si
tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones también
afectatarán a etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo
el cuerpo.

En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página.
Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se
pueden realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una
jerarquía de importancia para resolver conflictos entre varias declaracionesde estilos distintas
para una misma porción de página. Se puede ver a continuación esta jerarquía, primero
ponemos las formas de declaración más generales, y por tanto menos respetadas en caso de
conflicto:

Declaración de estilos con fichero externo. (Para todo un sitio web)

Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la
página)

Estilos definidos en una parte de la página. (Con la etiqueta <DIV>)

Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en
cuestión)

Declaración de estilo para una porción pequeña del documento. (Con la etiqueta
<SPAN>)

Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso
con la lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en
cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate atento
a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar bien la
materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que mejorarán tus
páginas.

Otra manera de definir estilos en un archivo externo

Veamos ahora otra manera de importar una declaración externa de estilos CSS: @import url
("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de estilos
guardadas en la ruta que se indica entre paréntesis. (las comillas son opcionales, pero los
paréntesis son obligatorios, por lo menos, en Explorer).

Se debe incluir en la declaración de estilos global a una página, es decir entre las etiquetas
<style type="text/css"> y </style>, que se colocan en la cabecera del documento.

Es importante señalar que la sentencia de importación del archivo CSS se debe escribir en la
primera línea de la declaración de estilos, algo parecido al código siguiente.

<style type="text/css">
@import url ("estilo.css");

02/03/2005
CSS, hojas de estilos - Manual completo Página 7 de 36

body{
background-color:#ffffcc;
}
</style>

El funcionamiento es el mismo que si escribiésemos todo el fichero a importar dentro de las

etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del código HTML (entre
las etiquetas </style>) estilos que habían quedado definidos en el archivo externo, los que se
aplicarán serán los que hayamos redefinido.

Así, en el ejemplo anterior, aunque hubiésemos definido en estilo.css un color de fondo para la
página, el color que prevalecería sería el definido a continuación de la importación: #ffffcc

La diferencia entre este tipo de importación del tipo y la que hemos visto anteriormente:

<link rel="stylesheel" type="text/css" href="hoja.css">

Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas básicas en el trabajo
con los estilos (que se definen en un archivo a importar) y unos estilos específicos para cada
página, que se definen a continuación, dentro del código HTML entre las etiquetas </style>,
como es el caso del ejemplo visto anteriormente.

Sintaxis CSS
Tal como se vió en los ejemplos la sintaxis es bastante sencilla y repetitiva. Vamos a verla:

Para definir un estilo se utilizan atributos como font-size,text-decoration... segudos de

dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir
muchos atributos separados por punto y coma.
Ejemplo:
font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de
la lista de atributos es opcional)

Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos
encerrados entre llaves.
Ejemplo:
H1{text-align: center; color:black}

Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla en
el siguiente capítulo. Muchos estos valores son unidades de medida, por ejemplo, el valor
del tamaño de un margen o el tamaño de la fuente. Las unidades de medida son las
siguientes:

Puntos pt
Pulgadas in
Centímetros cm
pixels px

Hasta aquí, queda dicho todo lo relativo a la sintaxis. En el siguiente capítulo podrás encontrar
una lista de los atributos de las hojas de estilo en cascada.

Atributos de las hojas de estilo

Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer de
una tabla donde se vean los distintos atributos y valores de estilos que podemos aplicarle a las
páginas web.

Aquí puedes ver la tabla de los atributos CSS, tenla a mano cuando utilices las CSS.

02/03/2005
CSS, hojas de estilos - Manual completo Página 8 de 36

Nombre del
Posibles valores Ejemplos
atributo
FUENTES - FONT
color: #009900;
color valor RGB o nombre de color
color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No todos los nombres de colores
son admitidos en el estandar, es aconsejable entonces utilizar el valor RGB.
xx-small | x-small | small | medium |
font-size:12pt;
font-size large | x-large | xx-large
font-size: x-large;
Unidades de CSS
Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.
serif | sans-serif | cursive | fantasy |
font-family:arial,helvetica;
font-family monospace
font-size: fantasy;
Todas las fuentes habituales
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los
exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.
También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene
espacios se utilizan comillas para que se entienda bien.
normal | bold | bolder | lighter | 100 |
font-weight:bold;
font-weight 200 | 300 | 400 | 500 | 600 | 700 | 800
font-weight: 200;
| 900
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad.
Normal y 400 son el mismo valor, así como bold y 700.
font-style:normal;
font-style normal | italic | oblique
font-style: italic;
Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar al italic.
PÁRRAFOS - TEXT
line-height: 12px;
line-height normal y unidades CSS
line-height: normal;
El alto de una línea,y por tanto, el espaciado entre líneas. Es una de esas características que no se podian mofificar
utilizando HTML.
none | [ underline || overline || line- text-decoration: none;
text-decoration through ] text-decoration: underline;
Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado.
text-align: right;
text-align left | right | center | justify
text-align: center;
Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de
texto, aunque recuerda que no tiene por que funcionar en todos los sistemas.
text-indent: 10px;
text-indent Unidades CSS
text-indent: 2in;
Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.
capitalize | uppercase | lowercase | text-transform: none;
text-transform none text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabrs, todo en
mayúsculas o minúsculas.
FONDO - BACKGROUND
background-color: green;
Background-color Un color, con su nombre o su valor RGB
background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la página.
background-image: url(mármol.gif) ;
Background- El nombre de la imagen con su camino
background-image: url
image relativo o absoluto
(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la página, se puede ver una página
de ejemplo
[http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos6/ejemplofondo.html]
BOX - CAJA
margin-left: 1cm;
Margin-left Unidades CSS
margin-left: 0,5in;
Indicamos con este atributo el tamaño del margen a la izquierda
margin-right: 5%;
Margin-right Unidades CSS
margin-right: 1in;
Se utiliza para definir el tamaño del margen a la derecha
margin-top: 0px;
Margin-top Unidades CSS
margin-top: 10px;

02/03/2005
CSS, hojas de estilos - Manual completo Página 9 de 36

Indicamos con este atributo el tamaño del margen arriba de la página

margin-bottom: 0pt;
Margin-bottom Unidades CSS
margin-top: 1px;
Con el se indica el tamaño del margen en la parte de abajo de la página
padding-left: 0.5in;
Padding-left Unidades CSS
padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es
parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-right: 0.5cm;
Padding-right Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de
este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-top: 10pt;
Padding-top Unidades CSS
padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este.
padding-right: 0.5cm;
Padding-bottom Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este.
border-color: red;
Border-color color RGB y nombre de color
border-color: #ffccff;
Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por
separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
none | dotted | solid | double | groove | border-style: solid;
Border-style ridge | inset | outset border-style: double;
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar),
solid=solido, double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D.
border-width: 10px;
border-width Unidades CSS
border-width: 0.5in;
El tamaño del borde del elemento al que lo aplicamos.
Para ver otros ejemlos de Box pulsar aquí
[http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos6/border.html]
float none | left | right float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho
elemento. Igual que el atributo align en imagenes en sus valores right y left.
clear none | right | left clear: right;
Si este elemento tiene a su altura imagenes u otros elementos alineados a la derecha o la izquierda, con el
atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que indiquemos.
Para ver una página que utiliza float y clear pulsar aquí
[http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos6/floatclear.html]

La especificación de estilos CSS es muy amplia, seguro que se queda en el tintero algún
atributo de estilo, pero creo que la inmensa mayoría están, y por supuesto la selección de los
más importantes.

Trucos avanzados con CSS

Las hojas de estilos son un tema largo del que se han escrito libros enteros. Nosotros nos
centramos en los temas prácticos y por ello vamos a acabar ya con este capítulo, en unos
cuantos puntos

Definir estilos utilizando clases

Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces.

Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o en
un archivo externo a la página. Para definirlas utilizamos la siguiente sintaxis, un punto seguido
del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera:

.nombredelaclase {atributo: valor;atributo2:valor2; ...}

02/03/2005
CSS, hojas de estilos - Manual completo Página 10 de 36

Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello
utilizaremos el atributo class, poniéndole como valor el nombre de la clase, de esta forma:

<ETIQUETA class="nombredelaclase">

Ejemplo de la utilización de clases

<html>
<head>
<title>Ejemplo de la utilizaci&oacute;n de clases</title>
<STYLE type="text/css">
.fondonegroletrasblancas {background-color:black;color:white;font-size:12;font-family:arial}
.letrasverdes {color:#009900}
</STYLE>
</head>

<body>
<h1 class=letrasverdes>Titulo 1</h1>
<h1 class=fondonegroletrasblancas>Titulo 2</h1>

<p class=letrasverdes>
Esto es un p&aacute;rrafo con estilo de letras verdes</p>
<p class=fondonegroletrasblancas>
Esto es un p&aacute;rrafo con estilo de fondo negro y las letras blancas. Es todo!</p>
</body>
</html>

Ver el ejemplo anterior [http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos7/clases.html]

Estilo en los enlaces

Una técnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no
se podía en HTML, es la definición de estilos en los enlaces, quitandoles el subrayado o hacer
enlaces en la misma página con distintos colores.

Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que
existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaración de estilos
global de la página (<STYLE>) o del sitio (Definición en un archivo externo):

Enlaces normales
A:link {atributos}

Enlaces visitados
A:visited {atributos}

Enlaces activos (Los enlaces están activos en el presiso momento en que se pincha sobre ellos)
A:active {atributos}

Enlaces hover (Cuando el ratón está encima de ellos, solo funciona en ieplorer)
A:hover {atributos}

El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color es
color:tu_color.

También podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo
style. De esta manera podemos hacer que determinados enlaces de la página se vean de
manera distinta

Ejemplo de estilos en enlaces

<html>
<head>
<title>Ejemplos de estilo en enlaces</title>
<STYLE type="text/css">

02/03/2005
CSS, hojas de estilos - Manual completo Página 11 de 36

A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;font-weight:bold}
</STYLE>
</head>

<body>

<a href="http://dominioinexistente.nofunciona.com">Enlace normal</a>

<br>
<br>
<a href="enlaces.html">Enlace visitado</a>
Pulsar este enlace para verlo activo,
poner el rat&oacute;n por encima para que cambie.

</body>
</html>

Ver el ejemplo anterior [http://www.desarrolloweb.com/articulos/reportajes/capitulos/css/ejemplos7/enlaces.html]

URL como valor de un atributo:

Determinados atributos de estilos, como background-image necesitan una URL como valor,
para indicarlas podemos definir tanto caminos relativos como absolutos. Así pues, podemos
indicar la URL de la imagen de fondo de estas dos maneras:

background-image: url(fondo.gif) En caso de que la imagen esté en el mismo directorio que la página.
background-image: url(http://www.desarrolloweb.com/images/fondo.gif)

Ocultar estilos en navegadores antiguos

En caso de definir dentro de la etiqueta <STYLE> unas declaraciones de estilos debemos

asegurarnos que estas no se imprimirán en la página web con navegadores antiguos. Pensar en
un navegador que no reconozca la etiqueta <STYLE>, pensará que corresponde con algo que
no entiende y se olvidará de la etiqueta. Lo siguiente que encuentra es texto normal y hará que
este se vea en la página, como con cualquier otro texto.

Para evitarlo debemos ocultar con comentarios HTML (<!-- esto es un comentario -->) todo lo
que hay dentro de la etiqueta <STYLE>. Se puede ver un ejemplo de esto a continuación:

De este modo hemos terminado nuestro manual de CSS, que espero pueda ayudar a hacer
páginas mejores y más rápidamente.

Quiero recordaros que siempre es útil ver como han hecho sus páginas otros progradores de
Internet. Para ver una página definida enteramente con hojas de estilos visitar la dirección
http://www.guiarte.com/

Para ver otras páginas que enseñan a utilizar las hojas de estilos visitar la sección correspondiente a
CSS de nuestro buscador [http://www.desarrolloweb.com/directorio/programacion/dhtml/css/]:

Aplicación de estilo avanzada a los enlaces

En este artículo vamos a ver cómo podríamos crear una barra de navegación bastante dinámica
utilizando únicamente las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una
barra de navegación que contiene enlaces de varios colores que cambian de tonalidad al pasar
el ratón por encima.

Podemos ver el resultado de nuestra barra pulsando este enlace

[http://www.desarrolloweb.com/articulos/ejemplos/ejemploenlaces_manual_css.html], para tener una idea más
exacta de lo que queremos conseguir.

02/03/2005
CSS, hojas de estilos - Manual completo Página 12 de 36

Cómo poner estilo a los enlaces

Ya lo vimos en capítulos anteriores de nuestro manual de CSS

[http://www.desarrolloweb.com/manuales/2/], pero lo repetimos aquí. Se define el estilo de los enlaces
asignando su apariencia en sus distintos estados:

Enlace no visitado. Se define con el atributo link.

Enlace visitado. Se define con el atributo visited.

Enlace activo (cuando se está pulsando). Se define con active.

Enlace con el reton encima. Se define con hover.

Esta definición se realiza en la cabecera de la página, entre las etiquetas <STYLE> Y </STYLE>,
y es global a toda la página.

Un ejemplo de esto se puede ver en esta declaración de estilos:

<STYLE type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;}
</STYLE>

Cómo dar estilo a un enlace en concreto

Si queremos resaltar nuestra barra de navegación probablemente querramos colocarla en una

tabla de nuestra página web, con un color que contraste un poco con el fondo. En un caso como
este, será necesario que los enlaces de la barra de navegación y los enlaces normales de la
página tengan colores distintos, por estar situados sobre dos tipos de fondos distintos.

Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la
cabecera de la página, con los estilos. Esto lo podemos conseguir de esta manera.

<a href="#" style="color:#ff0000">Mi enlace</a>

Hemos definido el color de un enlace de una manera específica, utilizando el atributo style, de
modo que este enlace siempre tendrá el color indicado, independientemente de su estado.

Es un enlace amarillo, que quedaría muy bien resaltado sobre un fondo oscuro, como se puede
ver en el ejemplo de barra de navegación siguiente.

Enlace 1
[http://www.desarrolloweb.com/articulos/#]
Otro enlace
[http://www.desarrolloweb.com/articulos/#]
Enlace 3
[http://www.desarrolloweb.com/articulos/#]

En la tabla anterior tenemos enlaces amarillos en una web donde los enlaces son azules por defecto.

Cómo utilizar las clases al aplicar estilo a los enlaces

También vimos en anteriores capítulos que el uso de clases puede ser muy útil a la hora de
definir estilos especiales que podemos aplicar a las etiquetas que queramos. A la hora de
trabajar con los enlaces también podemos aplicar las clases para definir distintos tipos de
enlaces, que tienen distintos tipos de estilos.

A.clase1:visited {color:#ff0000;}
A.clase1:active {color:#ff0000;}
A.clase1:link {color:#ff0000}

02/03/2005
CSS, hojas de estilos - Manual completo Página 13 de 36

A.clase1:hover {color:#00ff00}

La ventaja al utilizar las clases con los estilos de los enlaces es que podemos especificar un
formato distinto al enlace dependiendo de su estado: visitado o no, activo o con el ratón sobre
él.

Por si no quedó claro, al especificar el estilo con el atributo style del enlace sólo podíamos decir
que el enlace lo queremos en amarillo, y siempre lo tendremos en amarillo (sea visitado o no,
activo, o estemos o no con el ratón encima). Con las clases definimos un nuevo tipo de enlace
al que podemos dar distintos formatos dependiendo su estado.

Otras ventajas de utilizar las clases consisten en que escribimos una única vez los estilos y que
podemos cambiar el color de todos los enlaces de la clase con cambiar la delaración.

A partir de lo que acabamos de aprender podemos crear el ejemplo de barra de navegación

dinámica utilizando CSS que habíamos visto al principio del capítulo. El código sería el
siguiente.

<html>
<head>
<title>Ejemplo CSS para enlaces</title>
<style type="text/css">
A:link {color:#0000cc;}
A:visited {color:#0000cc;}
A:active {color:#0000cc;}
A:hover {color:#0000ff;}

A.clase1:visited {color:#ffff00;}
A.clase1:active {color:#ffff00;}
A.clase1:link {color:#ffff00}
A.clase1:hover {color:#00ff00}

A.clase2:visited {font-size:12;color:#ffffff;}
A.clase2:active {font-size:12;color:#ffffff;}
A.clase2:link {font-size:12;color:#ffffff;}
A.clase2:hover {font-size:12;color:#ffff33;}

body {font-family:arial;font-size:11;font-weight:bold}
td {font-family:arial;font-size:11;font-weight:bold}
</style>
</head>

<body>
<a href="#">Este enlace es normal</a>
<br>
<br>
<br>
<span style="font-weight:normal;font-size:10">
Los enlaces de esta barra son especiales,
<br>
están definidos por clases
</span>
<br>
<table width="110" cellspacing="1" cellpadding="2" border="0">
<tr>
<td bgcolor="#aa0000"><a href="#" class="clase2">Opciones 1</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Enlace clase1</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Otro de clase1</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Más enlaces</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Todavía más</a></td>
</tr>
</table>

02/03/2005
CSS, hojas de estilos - Manual completo Página 14 de 36

</body>
</html>

Se puede ver la página en funcionamiento en este enlace

[http://www.desarrolloweb.com/articulos/ejemplos/ejemploenlaces_manual_css.html]. Esperamos que sirva de
provecho este pequeño taller de CSS para vuestras creaciones.

Quiero agradecer la ayuda prestada para la elaboración de este artículo a Rafael Chacón, que
nos mandó un generoso mail con el truquillo que hemos expuesto aquí.

Qué son las capas

Veamos una pequeña introducción a lo que son las capas, la etiqueta HTML <DIV>
utilizada para construirla y los atributos CSS con los que podemos aplicar estilos.

Como ya hemos visto en nuestro manual de CSS [http://www.desarrolloweb.com/manuales/2/], <SPAN>

sirve para aplicarle estilo a una pequeña parte de una página HTML. Por ejemplo, con ella
podríamos hacer que una parte de un párrafo se coloree en rojo. Con <SPAN> no es habitual
englobar un trozo muy grande de texto, por ejemplo el que comprenda a varios párrafos.

Con <DIV> también podemos aplicar estilo a partes de la página HTML.

La diferencia entre <SPAN> y <DIV> es que con esta última si que podemos aplicar estilo a
una parte más amplia de la página, por ejemplo a tres párrafos. Además que la etiqueta
<DIV> tiene un uso adicional que es el de crear divisiones en la página a las que
podremos aplicar una cantidad adicional de atributos para modificar sus
comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la división al
centro, izquierda, derecha o justificado. Pero su uso más destacado es el de convertir esa
división en una capa.

Una capa es una división, una parte de la página, que tiene un comportamiento muy
independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier
parte de la misma y la podremos mover por ella independientemente, por poner dos
ejemplos. En el uso de capas se basan muchos de los efectos más comunes del DHTML.

Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son
compatibles más que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV> para
hacer capas preferentemente a las otras dos.

Los atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas
<SPAN> y <DIV>, son principalmente de estilos CSS. Estos atributos nos permiten, como
hemos podido ver en el manual de hojas de estilo en cascada de desarrolloweb, modificar de
una manera muy exhaustiva la presentación de los contenidos en la página. Para aplicar estilos
a estas etiquetas se utiliza el atributo de HTML style, de esta manera:

<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>

<DIV style="color:red;font-size:10px">...</DIV>

Como ya pudimos ver muchos ejemplos en el manual de CSS

[http://www.desarrolloweb.com/manuales/2/], nos referimos a él para ampliar esta información. Pero no
habíamos visto todavía una serie de atributos que nos sirven para posicionar la división en la
página como una capa. Estos atributos se pueden aplicar a la etiqueta <DIV> que es la que
servía para crear capas compatibles con todos los navegadores.

Los atributos para que la división sea una capa son varios y se pueden ver a

02/03/2005
CSS, hojas de estilos - Manual completo Página 15 de 36

continuación.

<div id="c1" style="position:absolute; left: 200px; top: 100px;">

Hola!
</div>

El primero, position, indica que se posicione de manera absoluta en la página y los segundos,
left y top, son la distancia desde el borde izquierdo de la página y el borde superior.

Hay otros atributos especiales para capas como width y height para indicar la anchura y altura
de la capa, Z-index que sirve para indicar qué capas se ven encima de qué otras, clip que
sirve para recortar una capa y hacer que partes de ella no sean visibles, o visibility para definir
si la capa es visible o no. Estos y otros atributos los veremos en el siguiente capítulo, donde
hablaremos del posicionamiento de capas [http://www.desarrolloweb.com/articulos/429.php?manual=2].

Atributos para capas

Hemos visto en el capítulo anterior qué son las capas y algunas pequeñas muestras sobre cómo crearlas y
darle algún estilo [http://www.desarrolloweb.com/articulos/415.php?manual=2].
Ahora vamos a ver en
detenimiento los atributos específicos para aplicar posicionamiento a una capa y otros estilos.

Antes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que
hemos visto en el manual de CSS [http://www.desarrolloweb.com/manuales/2]. Así, el atributo color indica
el color del texto de la capa, el atributo font-size indica el tamaño del texto y así con todos los
atributos ya vistos.

Ahora bien, existen una serie de atributos que sirven para indicar la forma, el tamaño de las
capas, la visibilidad, etc, que no hemos visto en capítulos anteriores y que veremos a
continuación.

Atributo position

Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute.

- relative indica que la posición de la capa es relativa a el lugar donde se estaba escribiendo en
la página en el momento de escribir la capa con su etiqueta

- absolute indica que la posición de la capa se calcula con respecto al punto superior izquierdo
de la página.

Atributo top

Indica la distancia en vertical donde se colocará la capa. Si el atributo position es absolute, top
indica la distancia del borde superior de la capa con respecto al borde superior de la página. Si
el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en
ese momento en la página hasta el borde superior de la capa.

Atributo left

Básicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la
distancia en horizontal a la que estará situada la capa.

Atributo height

Sirve para indicar el tamaño de la capa en vertical, es decir, su altura.

Atributo width

02/03/2005
CSS, hojas de estilos - Manual completo Página 16 de 36

Indica la anchura de la capa

Atributo visibility

Sirve para indicar si la capa se puede ver en la página o permanece oculta al usuario. Este
atributo puede tener tres valores.

- visible sirve para indicar que la capa se podrá ver.

- hidden indicará que la capa está oculta.
- inherit es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde está
metida la capa en cuestión. Si la capa no está metida dentro de ninguna otra se supone que
está metida en la capa documento, que es toda la página y que siempre está visible.

Atributo z-index

Sirve para indicar la posición sobre el eje z que tendrán las distintas capas de la página. Dicho
de otra forma, con z-index podemos decir qué capas se verán encima o debajo de otras, en
caso de que estén superpuestas. El atributo z-index toma valores numéricos y a mayor z-index,
más arriba se verá la página.

Atributo clip

Es un atributo un poco difícil de explicar. En concreto sirve para recortar determinadas áreas de
la capa y que no se puedan ver. Una capa que está visible se puede recortar para que se vea,
pero que no se vea algún trozo de esta. El cliping se indica por medio de 4 valores, con esta
sintaxis.

rect (<top>, <right>, <bottom>, <left>)

Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar en
este esquema.

Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en este artículo y
alguno más para aplicar estilo a la capa.

<div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left: 10px; top: 220px; position: absolute;
visibility: visible; z-index:10; font-size: 14pt; font-family: verdana; text-align: center; background-color: #bbbbbb">

Esta capa tiene un cliping, por eso se ve entrecortada.

<br>
<br>
Esto es una capa de prueba

02/03/2005
CSS, hojas de estilos - Manual completo Página 17 de 36

</div>

Puede verse el ejemplo en una página web

[http://www.desarrolloweb.com/articulos/ejemplos/atributos_capa_prueba.html], donde también podrá
apreciarse el efecto conseguido al realizar el cliping.

Problema con el posicionamiento absoluto de capas

He recibido una consulta en mi correo sobre colocación de capas de manera absoluta, pero en
la que no nos importe la definición de la pantalla del usuario y otros ir y venir de los elementos
HTML. Nuestro compañero expresó su duda de la siguiente manera:

Si trabajamos con position:absolute dando un left y un top funciona si tienes tu página alineada
a la izquierda. Mi página está alineada en el centro, entonces lo que sucede es que dependiendo
de la resolución de pantalla que tengas (ancho de 800px,1024px,etc) me baila toda la página y
no cuadra nada.

Primero que todo, debemos saber que si trabajamos con el position relative las capas se
colocan en el lugar donde aparecen dentro del código HTML. De este modo, si colocamos una
capa con position relative dentro de una celda de una tabla, dicha capa aparecería dentro de la
celda donde la estamos colocando, independientemente del lugar donde se sitúe la celda al
cambiar la definición de la pantalla.

El problema de esta solución es que la capa haría crecer la celda de la tabla donde queremos
colocarla (al igual que cualquier otro elemento HTML que colocásemos dentro de la tabla) y es
muy probable que nuestro diseño no nos permita este hecho. Seguramente ya habrías notado
este problema y si no es así te invito a que crees la capa que intentas colocar con el atributo
position a relative para ver si con eso tu problema ya está resuelto.

En casi todos los casos, la capa que intentamos colocar va a tener que tener el position
absolute, porque con relative no arreglamos totalmente el problema. Entonces volvemos a el
problema inicial, que era situar la capa con position absolute en el lugar exacto,
independientemente de la definición de pantalla.

La solución final que propongo pasa por aplicar algún truquillo. De hecho, estuve hace unos días
preguntándome sobre esa cuestión y al final encontré la solución, aunque no se me ocurrió a
mi, sino que la extraje de http://www.cross-browser.com/.

La idea es un poco compleja y para su puesta en marcha debemos realizar una serie de
acciones que, sinceramente, considero excesivas para un problema inicialmente sencillo. Así
pues, que no asuste lo que voy a soltar a continuación, que luego trataré de explicarlo un poco
mejor.

Nuestro esquema de trabajo consistirá en una capa con posición relativa, que nos servirá de
"ancla" y otra con la posición absoluta, donde colocaremos el contenido final a mostrar en la
capa.

La capa relativa la colocaremos en el lugar aproximado donde queramos que aparezca la capa
absoluta. La capa absoluta la posicionaremos, una vez cargada la página, en un lugar próximo a
la capa relativa. Por supuesto, estas acciones las vamos a tener que realizar con Javascript, que
es el lenguaje que nos permite actualizar las posiciones de las capas dinámicamente.

Detenidamente

Decíamos que habría que colocar una capa relativa cercana al lugar donde tiene que aparecer la
capa con position absolute. Insisto en que las capas relativas se colocan en el lugar donde las
metemos dentro del código HTML, por lo que será fácil colocar la capa relativa en el lugar
exacto y que este lugar sea válido para cualquier definición.

02/03/2005
CSS, hojas de estilos - Manual completo Página 18 de 36

La segunda capa, la que tiene el contenido final, la pondremos inicialmente en una posición
cualquiera y escondida, de manera que no se vea que está mal colocada. Una vez terminada de
cargar la página, podremos acceder a la posición de la capa relativa, extrayendo sus valores top
y left y colocándolos en los correspondientes top y left de la capa con posición absoluta. Una
vez marcada la posición de la capa absoluta podemos volverla visible.

A la vista de la imagen siguiente, la capa con posición relativa

la hemos colocado en el enlace. En realidad habría tres capas
con posición relativa para poder posicionar otras tantas capas
con posición absoluta. La parte que vemos sombreada de verde
corresponde al espacio que abarcaría la capa relativa.

Su posición sería la que está marcada por el aspa roja que

aparece en su esquina superior izquierda. Dicha posición
depende del lugar donde aparezcan los enlaces en la página.

Luego, con Javascript deberíamos asignar la posición de la capa

absoluta de una manera parecida a esta.

left de la capa absoluta = left de la capa relativa

top de la capa absoluta = top de la capa relativa + altura de la capa relativa

Podemos sumarle algún píxel más a la posición de la capa, si es que queremos moverla un poco
abajo y a la derecha, tal como hemos visto en la imagen.

No pretendo en este artículo, muy a mi pesar y por falta de espacio y tiempo, explicar cómo se
hacen esas operaciones de Javascript. Advierto que si no se conoce nada de Javascript va a ser
imposible ponerse con una tarea tan tediosa como el manejo de capas. Si por el contrario, ya
hemos tenido contacto con Javascript y DHTML anteriormente, no debería ser un problema
realizar esas acciones.

Referencias Javascript

En DesarrolloWeb tenemos un par de manuales de Javascript, que sería necesario estudiar para
empezar a introducirse en el lenguaje.
- Programación en Javascript I [http://www.desarrolloweb.com/manuales/20/]
- Programación en Javascript II [http://www.desarrolloweb.com/manuales/26/]

En el Taller de Javascript [http://www.desarrolloweb.com/manuales/22] tenemos algún artículo sobre

tratamiento dinámico de capas.

En el momento en el que escribo estas líneas no tenemos un manual de DHTML y tratamiento

de capas completo, por lo que sería recomendable estudiarlo en alguno de los enlaces
recomendados de nuestra sección de DHTML del buscador
[http://www.desarrolloweb.com/directorio/programacion/dhtml/].

Cómo evitar que una página se imprima

Para ello, hay que echar mano de las hojas de estilo. Tanto si el documento tiene una hoja ya
asociada como sino, lo que vamos a hacer es asociarle un nueva hoja de estilos. Dicha hoja
contendrá un único estilo, con el código necesario para ocultar un elemento:

.nover{
visibility:hidden
}

A la hora de asociar la hoja de estilos, se le añade un modificador a la etiqueta HTML que

enlaza con el fichero .css que permite especificar para qué tipo de medio se aplicará esta hoja.

02/03/2005
CSS, hojas de estilos - Manual completo Página 19 de 36

En nuestro caso, se aplica en el ámbito de la impresión, por lo que se utiliza el atributo

media="print".

<link href="nombre_hoja" rel="stylesheet" type="text/css" media="print">

Una vez hecho esto, basta que toda nuestra página este dentro de un elemento div, que
pertenezca a la clase nover.

<body>
<div class="nover">

-- Contenido --

</div>
</body>

Al hacer esto se provoca que en pantalla se visualice la página, pero que si por el contrario se
decide imprimir, se le aplicará la hoja de estilos de impresión, en la que el elemento esta
puesto como no visible, por lo que no se imprimirá.

Codigo Completo:

Veamos el código íntegro de la página web y la hoja de estilos asociada.

Página HTML

<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<div class="nover">

… contenido de la pagina

</div>
</body>
</html>

Hoja estilos: estilos.css

.nover{
visibility:hidden
}

Nota: Esta catacterística de las hojas de estilos funciona con éxito en navegadores IExplorer 6, Netscape
7 y Opera 7. No la hemos probado en otras versiones.

Se puede ver el ejemplo relatado en el artículo en una página a parte

[http://www.desarrolloweb.com/articulos/ejemplos/noimprimir].

Títulos para tablas decorados con CSS

CSS son Hojas de Estilo en Cascada. Muchos de vosotros debéis conocerlas ya y supongo que
las habréis utilizado en más de una ocasión. En cualquier caso, tanto para aprender lo que son
como para afianzar los conocimientos, podéis acceder al Manual de CSS
[http://www.desarrolloweb.com/manuales/2/] de DesarrolloWeb.com.

Vamos a ver un uso de las CSS que puede ser muy interesante para hacer tablas con títulos
que tengan un cierto estilo. Lo bueno de las CSS es que podemos definir el estilo una vez y se
puede utilzar en múltiples elementos de la página. Con todo ello vamos a tratar en este

02/03/2005
CSS, hojas de estilos - Manual completo Página 20 de 36

artículo: la definición de un estilo y la aplicación para hacer distintos tipos de decoración de

tablas.

Podemos ver el resultado final [http://www.desarrolloweb.com/articulos/ejemplos/css/titulo1.html] que vamos a

obtener.

Definición de los estilos

En la cabecera de la página colocamos la etiqueta <style> que sirve para definir los estilos a
utilizar en la página. Vamos a definir un estilo por defecto para las celdas (etiqueta <td>) y un
par de clases, la primera para las tablas y la segunda para las celdas titular (las que tienen
color de fondo).

<style type="text/css">
td {
font-family:verdana,arial;
font-size:8pt;
}
.estilotabla{
background-color:ffffff;
border-style:solid;
border-color:666666;
border-width:1px;
}
.estilocelda{
background-color:ddeeff;
color:333333;
font-weight:bold;
font-size:10pt;
}
</style>

Los atributos de estilos se pueden conocer en el manual de CSS. En este caso, para la clase
estilotabla estamos definiendo un color de fondo, un borde sólido, un color del borde y un ancho
del borde, por ese orden. Para la clase estilocelda estamos definiendo un color de fondo, un
color del texto, un grosor de la fuente y un tamaño de la fuente.

Utilización de los estilos para obtener una tabla decorada

Veamos el código de la primera tabla del ejemplo.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla">

<tr><td class="estilocelda">Título de sección</td></tr>
<tr><td>Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido
relacionado con este título.</td></tr>
</table>

Lo único que tiene de especial es que utiliza las clases que se han definido previamente. En la
etiqueta <table> se utiliza la clase estilotabla y en la etiqueta <td> que queremos que sea el
titular se utiliza la clase estilocelda. La otra celda tendrá el estilo definido para todas las celdas
en general.

La otra tabla tendría este código.

<table width=280 height=18 cellpadding=2 cellspacing=2 class="estilotabla">

<tr><td class="estilocelda">Título de sección</td></tr>
</table>
<table width="280" cellpadding="2" cellspacing="2"><tr><td>
Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido relacionado

02/03/2005
CSS, hojas de estilos - Manual completo Página 21 de 36

con este título.

</td></tr></table>

En este caso utilizamos dos tablas para hacer el efecto. La tabla de arriba tiene un borde y la de
abajo no. Para ello aplicamos la clase definida para la tabla y la celda solamente en la tabla de
arriba, así el borde definido en la declaración de estilos sólo afecta a la tabla de arriba.

Podemos ver el resultado en una página aparte [http://www.desarrolloweb.com/articulos/ejemplos/css/titulo1.html].

Bordes punteados con CSS

Vamos a ver otra manera de utilizar las CSS (Hojas de Estilo en Cascada) para crear un estilo
que podemos utilizar en tablas HTML. Es un estilo para realizar los bordes de tablas con líneas
punteadas, lo que resulta bastante original, aunque nuestro consejo es no abusar de ello.

El efecto buscado es el siguiente:

Nota: Para ver correctamente este efecto es necesario disponer de Internet Explorer versión 6. En Mozilla
también se pueden ver los bordes punteados, pero el punto es mucho más fino, por lo que el efecto queda
más discreto.

Para conseguirlo simplemente tenemos que utilizar la propiedad de CSS "border-style",

asignando el valor "dotted", que quiere decir punteado en inglés. Además, podemos definir
otros valores al estilo de borde punteado, como puede ser el color del borde o el color de fondo
de la tabla.

Para este ejercicio práctico hemos definido una clase que aplicaremos a las tablas u otros
elementos que deseemos que tengan el borde punteado.

Nota: una clase es una declaración de estilo que podemos utilizar en cualquier elemento de una página.
Para ello se incluye el atributo class="nombre_clase" en la etiqueta HTML que deseamos que tenga dicho
estilo. Podemos aprender más sobre clases y estilos CSS en el manual de Hojas de Estilo en Cascada.
http://www.desarrolloweb.com/manuales/2

<style type="text/css">
.punteado{
border-style: dotted;
border-width: 1px;
border-color: 660033;
background-color: cc3366;
font-family: verdana, arial;
font-size: 10pt;
}
</style>

Esta clase tiene definidos una serie de atributos de estilos. Desde el primero hasta el último
son: tipo de borde, ancho del borde, color del borde, color de fondo, tipo de letra y tamaño de
la fuente. El atributo que nos interesa a nosotros es el primero, en el que se indica que se
desea un tipo de borde punteado.

Para utilizar el estilo tenemos que asignar a un elemento de HTML la clase generada antes. Para
ello utilizamos el atributo class de HTML. Tal como se ha definido la clase se puede utilizar en
cualquier elemento de la página web, como una tabla o una celda.

<table class="punteado" width=80% align="center">

02/03/2005
CSS, hojas de estilos - Manual completo Página 22 de 36

<tr>
<td>
<b>Esto es un texto</b>
<br>
Lo pongo para ver como queda. Me gustará seguro! y a vosotros también.
</td>
</tr>
</table>

En este ejemplo, toda la tabla tendrá un efecto de borde punteado. Si colocásemos esa clase
únicamente en una celda, sólo esa celda tendría el borde punteado. Es el caso del ejemplo
siguiente:

<table width=300>
<tr>
<td class="punteado"><b>Título de la tabla</b></td>
</tr>
<tr>
<td>
Aquí podríamos poner cualquier cosa. Sería como el cuerpo de la tabla que correspondiese con el titular que sí tendría
algún estilo majete.
</td>
</tr>
</table>

Estos dos ejemplos se pueden ver en una página aparte

[http://www.desarrolloweb.com/articulos/ejemplos/css/dotted.html], que incluye también una tercera
propuesta de uso del estilo de borde punteado.

No abusar del uso de los bordes punteados

Los bordes con líneas punteadas pueden ser muy útiles y vistosos, pero si nos pasamos en su
utilización puede darse el caso que el efecto quede poco agradable.

El borde punteado llama la atención sobre el elemento que lo utiliza, aunque provoca una
sensación de inestabilidad. También hace que parezca que no está terminado, o bien, no está
integrado con el resto del diseño.

Estilos en campos de texto

Vamos a ver unos ejemplos sobre cómo aplicar estilos avanzados a campos de texto en páginas
web. Nos referimos a campos de texto de los normales <input type=text> y campos de texto
que soportan varias líneas <textarea>.

Con estilos, como ya se ha debido aprender en el manual de CSS

[http://www.desarrolloweb.com/manuales/2], podemos definir el formato de presentación de cualquier
elemento de la página. Los campos de texto, que siempre tienen una forma muy específica,
también aceptan especificaciones de estilos para variar su apariencia típica.

Vamos a ver varios ejemplos para comprobar las posibilidades de las hojas de estilos, aplicadas
sobre campos de texto y textareas.

<input type="text" name="campotexto0" size="12" style="border-width: 2px; border-style: solid; font-size:8pt; color:
#009900; letter-spacing : 3px;">

Este campo de texto se presentará con un borde de 2 pixels, un borde sólido, tamaño de la
letra de 8 puntos, color del borde y de las letras verde un poco oscuro. También se define un
espaciado entre las letras de 3 pixel.

<input type="text" name="campotexto1" size="12" style="background-color:e3e3e3; border: 1px solid #666666;

02/03/2005
CSS, hojas de estilos - Manual completo Página 23 de 36

font-size:8pt; color: #000099">

Este campo de texto tiene los estilos declarados con una sintaxis un poco distinta, ya que se
han agrupado varios estilos relativos al borde en un solo atributo. Los estilos con los que se
presentará son: color de fondo grisáceo, borde de 1 pixel, borde de estilo sólido, color del borde
gris más oscuro, tamaño del texto de 8 puntos y color de las letras azul.

<textarea cols="20" rows="3" name="campotexto2" style="overflow:auto; border: 1px solid #ff6666;"></textarea>

Este campo de texto con varias líneas, también llamado textarea, tiene viarios estilos, que son
parecidos a los que hemos visto para el anterior campo de texto, con la salvedad del atributo
overflow, que está definido como auto. El atributo overflow tiene relación con las barras de
desplazamiento que aparecen en los textarea. El valor auto sirve para que la barra de
desplazamiento vertical del campo de texto sólo aparezca en caso que se necesite, es decir, si
el texto del campo supera las líneas que tiene reservadas el textarea. Si queremos que no se
vean las líneas nunca, podemos asignarle el valor hidden al atributo overflow. Por lo que
respecta a los otros estilos de este campo de texto de múltiples líneas, se han definido 3
valores para el estilo del borde, en un único atributo. Los estilos son borde de un píxel, borde
de estilo sólido y borde de color rojo pastel.

<textarea cols="20" rows="3" name="campotexto3" readonly style="overflow:auto; border-style:dashed; border-

color:555555; border-width: 1px;">

Hola a todos los que lean esto.

Espero que este ejemplo os parezca interesante!!
Saludos y suerte!
Miguel
</textarea>

Hola a todos los

que lean esto.
Espero que este
ejemplo os parezca
En este campo textarea, hemos incluido también un texto con el que se inicializará su
contenido. Primero llamamos la atención sobre el atributo de HTML readonly, que sirve para
que el campo textarea no sea editable, es decir, que no se pueda cambiar su contenido.
También con estilos CSS se han definido una serie de valores para la apariencia, estos son:
mostrar las barras de desplazamiento sólo cuando toca, un borde del campo punteado, un color
del borde gris oscuro y un ancho del borde de 1 pixel.

Conclusión

Esperamos que con estas indicaciones podáis aprender un poco más sobre cómo modificar el
estilo de un campo de texto, para adaptarlo mejor al diseño de vuestras páginas.

Hay que tener en cuenta que las características de estilos no siempre están disponibles en
todos los navegadores. Las más importantes sí que las podremos ver en todos los navegadores
que soporten estilos, aunque ciertos valores, como el borde punteado, no se pueden visualizar
correctamente en navegadores antiguos. Pasa lo mismo con el atributo readonly, que no
siempre ha estado disponible en HTML.

Maquetación CSS

02/03/2005
CSS, hojas de estilos - Manual completo Página 24 de 36

En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en

cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e
inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar
en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la
posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y
ofreceremos tutoriales más prácticos.

Como se ha podido aprender en el Manual de CSS [http://www.desarrolloweb.com/manuales/2/], las hojas

de estilo en cascada ayudan a separar el contenido de la forma, es decir, los elementos que
componen una página de la forma con la que se muestran. Además, CSS ayuda en gran medida
a la definición de estilos en la página, ya que permite ajustar de una manera mucho más
precisa cualquier aspecto de cualquier elemento de la página.

La maquetación con CSS lleva la utilización de las hojas de estilo a su grado máximo, de
manera que cualquier definición del aspecto de la página se realiza en la declaración CSS que
enlazamos con el documento HTML. Para definir la situación de los elementos en la página se
utilizan las capas, a las que se aplica un posicionamiento a través también de las hojas de
estilo.

Para crear las capas se utilizan etiquetas <DIV>, en las que se introducen los elementos que
queramos que aparezcan en la página. Los elementos dentro de los <DIV> también se pueden
anidar, para heredar las propiedades y posicionamiento de las capas padre.

En la maquetación por capas se definen únicamente etiquetas <DIV> y las tablas sólo se
utilizan para mostrar información tabulada, es decir, mostrada en filas y columnas. Cabe
señalar que en la maquetación tradicional se utilizan las tablas para ajustar la posición de los
elementos en la página. Seguro que muchos de los lectores están muy familiarizados con el uso
de tablas para maquetar una web, pues se trata de una técnica bastante sencilla, aunque
bastante poco práctica y que complica un tanto el código de las páginas web resultantes.

La maquetación por tablas es una forma de crear webs más evolucionada y que mejora en
mucho a la maquetación tradicional, aunque también tiene sus inconvenientes.

Veamos primero algunas de las ventajas de la maquetación CSS:

La separación del contenido de la página y del estilo o aspecto con el que se

deben mostrar. Tener en cuenta que, cuanto más separemos estos dos elementos, más
sencillo será el mantenimiento de las páginas y el procesamiento de la información. Con
ello también podremos obtener páginas más limpias y claras.

Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se
introducen en un documento externo, liberaremos el código de la página y ocupará mucho
menos. Como la declaración de estilos se almacena en la caché del navegador, sólo se
transfiere en la primera página que se visita del sitio, con lo que la segunda y posteriores
páginas que se soliciten se cargarán mucho más rápido.

Facilidad para alterar el aspecto de la página sin tocar el código HTML. Como toda
la información de los estilos y el posicionamiento de las capas se encuentra en un mismo
archivo, si deseamos cambiar cualquier elemento de la página -ya sea su posición o su
aspecto-, sólo tenemos que actualizar la hoja de estilos y los cambios se verán
automáticamente en todo el web.

Como decimos, también hay algunas desventajas:

Compatibilidad con navegadores antiguos. Se necesita que el visitante disponga de

un navegador bastante avanzado. La mayoría de los visitantes disponen de navegadores
que soportan características avanzadas de las CSS, pero todavía hay mucha gente que no
ha actualizado sus equipos o que navega en sistemas de sólo texto. Los navegadores que
no soportan hojas de estilos, por lo menos leerán el código de la página y lo mostrarán
sin ningún posicionamiento. Ello puede resultar fastidioso, pero por lo menos visualizarán
todos los datos de la página, aunque descolocados y sin estilo.

02/03/2005
CSS, hojas de estilos - Manual completo Página 25 de 36

Diferencias entre navegadores. Dependiendo del navegador también cambian las

etiquetas de estilos soportadas, por lo que las páginas puede que no se vean
exactamente igual en unos clientes que en otros. También, al igual que ocurre con HTML,
hay atributos no estándar o que tienen valores por defecto diferentes. Cuando se empieza
con la maquetación en CSS, puede resultar un tema bastante complicado y crearnos
bastantes dolores de cabeza, no obstante, se trata de, poco a poco, ir aprendiendo todos
los atributos y los navegadores donde se visualizan o no.

Dificultad. Sin duda, si estamos acostumbrados al HTML, pasar a CSS resulta bastante
más complicado y requiere un estudio más profundo. Sin embargo, este paso nos
brindará un mayor control de los elementos de la página y ampliará nuestras fronteras a
la hora de maquetar.

Ejemplo CssZenGarden

Existe un sitio muy interesante e ilustrador que nos puede ayudar a conocer rápidamente la
potencia de las CSS y hacernos una idea de lo que puede significar su uso. Es un sitio donde se
muestra un contenido y un diseño bastante logrado. Además, dispone de varios enlaces para
poder ver el mismo sitio, con el mismo contenido, pero con distinto aspecto. De ese modo
podemos ver cómo se puede llegar a alterar el diseño de una página con tan solo cambiar la
hoja de estilos.

La URL del sitio es http://www.csszengarden.com/. Es muy interesante que seleccionéis otros diseños
para ver el cambio radical que puede tener las páginas web con distintas hojas de estilos.

Nosotros hemos explorado un poco las capacidades de las CSS y hemos realizado un ejemplo
de diseño de CssZenGarden por nuestra cuenta. Podemos verlo en nuestro propio servidor en este enlace
[http://www.desarrolloweb.com/articulos/ejemplos/csszen/].

Por donde continuar

En DesarrolloWeb.com tenemos pensado hacer una línea de artículos para explicar el proceso
de creación de una web, maquetada por completo en CSS. Sin embargo, por el momento
debemos referiros a algunas páginas en inglés que explican este asunto con detalle.

http://www.stylegala.com/
http://www.cssbeauty.com/
http://www.cssvault.com/
http://www.webstandardsawards.com/

Formas de aplicar estilos en maquetación CSS

Vamos a ver otra vez distintos modos de aplicar estilos a las páginas. Es un tema que ya vimos
en el manual de CSS [http://www.desarrolloweb.com/manuales/2], pero merece la pena refrescar
conceptos y ampliar la información que se ofreció en su día.

Aplicación de estilo a etiquetas

Se puede asignar el estilo a una etiqueta concreta de HTML. Para ello, en la declaración de
estilos escribimos la etiqueta y entre llaves, los atributos de estilo que deseemos.

body {
background-color: #f0f0f0;
color: #333366;
}

Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas
seguidas por comas y luego, entre llaves, los atributos que queramos definir.

h1, p{

02/03/2005
CSS, hojas de estilos - Manual completo Página 26 de 36

color: red;
}

En este caso se define que los encabezados de nivel 1 y los párrafos, tengan letra roja.

Definición de clases

Podemos utilizar una clase si deseamos crear un estilo específico, para luego aplicarlo a
distintos elementos de la página. Las clases en la declaración de estilos se declaran con un
punto antes del nombre de la clase.

.miclase{
color: blue;
}

Para asignar el estilo definido por una clase en un elemento HTML, simplemente se añade el
atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class se asigna al
nombre de la clase a aplicar. Por ejemplo:

<p class="miclase">este párrafo tiene el estilo definido en la clase "miclase".</p>

El párrafo anterior se presentaría con color azul. La definición de clases y su utilización es

sencilla, pero veamos un ejemplo más detallado:

Para la siguiente declaración de estilos:

body, td, p{
background-color: #000000;
color: #ffffff;
}

.inverso{
background-color: #ffffff;
color: #000000;
}

Se ha definido un fondo negro y color del texto blanco para el cuerpo de la página, así como las
celdas y los párrafos. Luego se ha declarado una clase, de nombre "inverso", con los colores al
revés, es decir, fondo blanco y texto negro.

<body>
<p>Hola esto es un parrafo normal</p>
<p class="inverso">Párrafo con los colores invertidos</p>
<table>
<tr>
<td class="inverso">INVERSO</td>
<td>NORMAL</td>
</tr>
</table>
</body>

Esta página tiene, generalmente, el fondo negro y el texto blanco. El primer párrafo, que es un
párrafo normal, sigue esa definición general de estilos, pero el segundo párrafo, al que se ha
aplicado la clase "inverso", tiene el fondo blanco y el texto en negro. Por lo que respecta a la
tabla, en su primera celda se ha asignado la clase "inverso", por lo que se verá con fondo
blanco y color de texto en negro. Mientras que la segunda celda, que no tiene asignada ninguna
clase, se presentará como se definió en la regla general.

Para conocer los resultados obtenidos en el anterior ejemplo podemos verlo en una página aparte
[http://www.desarrolloweb.com/articulos/ejemplos/css/clases.html].

Estilos que sólo se utilizan una vez

También podemos tener un estilo específico para un único elemento, que no va a repetirse en

02/03/2005
CSS, hojas de estilos - Manual completo Página 27 de 36

ningún otro caso. Para ello tenemos los estilos asignados por identificador. Los identificadores
se definen en HTML utilizando el atributo id en la etiqueta que deseamos identificar. El valor del
atributo id será el que definamos nosotros.

<div id="capa1">

En la hoja de estilos, para definir el aspecto de ese elemento con id único, se escribe el carácter
almohadilla, seguido del identificador indicado en la etiqueta y entre llaves los atributos css que
deseemos.

#capa1{
font-size: 12pt;
font-family: arial;
}

En este caso se ha asignado fuente de tamaño 12 puntos y cuerpo arial.

Como se puede concluir en la lectura de estas líneas, generalmente se prefiere utilizar estilos
definidos en clases a los definidos con identificadores, a no ser que estemos seguros que ese
estilo no se va a repetir en todo el documento.

Maquetar una página con CSS

Vamos a realizar un ejercicio de maquetación de una página web utilizando únicamente hojas
de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las
definiciones del aspecto, que se guardarán en un archivo .css. El ejercicio lo realizaremos paso
a paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica
como Photoshop.

Referencia: Tenemos un manual para aprender CSS [http://www.desarrolloweb.com/manuales/2/] en

DesarrolloWeb.com, donde además se explican las primeras nociones y conceptos que hay que conocer
sobre la maquetación [http://www.desarrolloweb.com/articulos/1771.php?manual=2].

Imágenes de partida

Podemos ver la imagen que hemos creado y que vamos a intentar maquetar
lo más parecido posible. No es el
[http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/plantilla.gif]
objetivo de este manual ofrecer las técnicas para realizar esta imagen, aunque en otros manuales
[http://www.desarrolloweb.com/manuales/] de DesarrolloWeb.com podemos ver tutoriales para
aprender algunos de los trucos de diseño utilizados.

Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con
los que trabajar.

De esta imagen hemos extraído algunos gráficos, que utilizaremos a la hora de maquetar el
diseño. Sería interesante descargarlo para poder realizar el ejercicio por vuestra cuenta
[http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/pack-imagenes.zip].

Para los impacientes, tenemos un enlace a la página resultado que vamos a conseguir realizar
al final del artículo. Puede ser bueno verla para hacerse una idea de donde queremos llegar.

Desarrollo de la página y la hoja de estilos

Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos
explicar las etiquetas y estilos que hemos utilizado para cada parte de la página.

Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de
estilos externa.

02/03/2005
CSS, hojas de estilos - Manual completo Página 28 de 36

<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>

El cuerpo de la página <body>

En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de
fondo "fondo.gif", que se repetirá por toda la página en un mosaico. También se definen unos
márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la página
aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros
navegadores se realiza en la capa principal con el atributo "margin" definido como "auto").

Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros
elementos, como el tipo de letra o el color del texto.

BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

La capa contenedor

Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta
capa se colocan todos los elementos que va a tener la página.

<div id="contenedor">

</div>

En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habíamos
centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la
alineación por defecto sea a izquierda). También definimos una anchura de 700px, un color de
fondo blanco y el margen, con el atributo "margin", lo definimos como "auto", para que Mozilla
y otros navegadores centren la capa.

#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}

Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habíamos definido en el
diseño original. Se podría haber definido el atributo "border", pero eso nos repercute
negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para que
se vea correctamente en todos los navegadores.

Este ejercicio lo vamos a ver en varios pasos. En el siguiente bloque mostraremos cómo se maqueta la
cabecera y la barra de navegación [http://www.desarrolloweb.com/articulos/1824.php?manual=2].

Maquetar una página con CSS II

Continuamos el ejercicio práctico para realizar la maquetación de una página paso a paso con
capas y hojas de estilo en cascada. Se puede ver el artículo anterior de esta serie en Maquetar una
página con CSS[http://www.desarrolloweb.com/articulos/1823.php?manual=2].

La cabecera de la página

02/03/2005
CSS, hojas de estilos - Manual completo Página 29 de 36

La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es

lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno"

border="0"></div>

Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a
continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos
introducirá un pequeño márgen debajo de la imagen, que queremos evitar.

Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos
que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado
definir esos valores porque son los que se tomarían por defecto.

#cabecera{
height : 106px;
width: 700px;
}

La barra de navegación

Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la
cabecera.

<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
</div>

Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay
que fijarse que además los enlaces tienen una clase, llamada "enlacenav", que utilizaremos
para darle un estilo específico a a estos enlaces, independiente del definido por defecto en la
página.

Por lo que respecta a la capa, se define un color y una imagen de fondo, unos márgenes
internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de
abajo.

#navegador{
background : #F5F4C3 url(images/fondonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}

Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los
estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases
VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el
mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER es
el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el ratón
esté encima, cambiará de color.

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{

color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}

Podemos ver cómo queda el ejercicio realizado hasta el momento

02/03/2005
CSS, hojas de estilos - Manual completo Página 30 de 36

[http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/paso1.html].

Maquetar una página con CSS III

Este ejercicio trata de maquetar una página utilizando capas y css. La primera parte se puede
ver en: Maquetar una página con CSS [http://www.desarrolloweb.com/articulos/1823.php?manual=2].

El cuerpo de la página

La parte de la página donde colocamos la información principal. Crearemos una capa

independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que
queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener en
una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las
etiquetas que colocamos dentro.

<div id="cuerpo">
<h1>Título de la página</h1>
<p>
En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos
cómo realizar este tipo de maquetación, junto con algunas ventajas e inconvenientes. Para muchos será todavía un
campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con
CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y
ofreceremos tutoriales más prácticos.
</p>
<p>
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la
forma, es decir...
</p>
<div id="navabajo">
<a href="#">Volver</a> |
<a href="#">Portada</a> |
<a href="#">Mapa del sitio</a>
</div>
</div>
Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio cuerpo,
con una segunda barra de enlaces que faciliten la navegación para las personas que lleguen al
final del scroll vertical de la página.

Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo.
Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El
resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a
continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si
asignamos en HTML el atributo align=left en una imagen)

Para posibilitar la disposición en dos columnas que hemos definido en el diseño original, vamos
a hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente, la capa de
la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.

#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}

También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del
cuerpo:
H1{
font-size: 12pt;
}

Los encabezados de nivel 1, que tengan tamaño de letra 12pt.

02/03/2005
CSS, hojas de estilos - Manual completo Página 31 de 36

#navabajo{
font-weight : bold;
}

Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para facilitar
la navegación.

Podemos ver el ejercicio tal como queda con los pasos realizados hasta el momento
[http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/paso2.html].

Maquetar una página con CSS IV

En los pasos anteriores de este taller [http://www.desarrolloweb.com/articulos/1823.php?manual=2] vimos cómo
crear la cabecera y cuerpo de la página. Ahora vamos a ver cómo hacer el lateral derecho de la
página.

La capa lateral

En el lateral derecho situamos una nueva capa, que ofrece acceso a servicios y otras
informaciones.

<div id="lateral">
... contenido lateral...
</div>

El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene
bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:

#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}

Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral
izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de
otros elementos.

Además, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha.
Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una
disposición en 2 columnas.

Veremos a continuación los elementos que vamos a colocar dentro de la capa lateral, en una
especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena
conocer en líneas generales cómo van a crearse. Cada caja tendrá este código HTML,
compuesto por un titulo y un contenido de la caja:

<h2 class="titlat">Titulo de la caja</h2>

<div id="idunico" class="cuerpolateral">
Contenido de la caja
</div>

El título lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con
un div. Cada uno de estos elementos tiene una clase, que se aplicará a los mismos elementos
en cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo
estilo.

.titlat{
background-color:#68729E;

02/03/2005
CSS, hojas de estilos - Manual completo Página 32 de 36

color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}

.cuerpolateral{
padding: 5px 4px 13px 10px;
}

El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del texto,
un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes internos,
peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un
espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de línea doble
arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos
en la parte de abajo, que tendrá 8 pixel.

Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que
hay en el lateral. Ese estilo simplemente define unos márgenes internos.

Caja de buscar

Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un
formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.

Esa caja de búsqueda se coloca en un formulario. Hemos puesto diversos identificadotes a los
elementos que hay dentro del fomulario, para poder aplicar estilos a cada componente por
separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden
venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el
diseño del web.

<h2 class="titlat">Buscar</h2>
<div id="fbuscar" class="cuerpolateral">
<form>
<div id="campotexto"><input type="text" name="criterio"></div>
<div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>
<div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div>
<div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div>
</form>
</div>

Los elementos que hemos definido en la hoja de estilos para este pequeño formulario son los
siguientes:

INPUT {
font-size : 8pt;
}

Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos.

#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}

El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni
abajo.

#campotexto{
float: left;
}

La capa "campotexto", donde está el campo de texto, hemos definido que debe "flotar" a la

02/03/2005
CSS, hojas de estilos - Manual completo Página 33 de 36

izquerda.

#campotexto input{
width:100px;
}

El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho.

#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}

La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input
type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado
izquierdo. Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la
izquierda, más 6 pixeles adicionales, que son el verdadero margen que habrá entre el campo de
texto y la imagen de submitir.

#botonbuscar input{
border : 0px none;
}

Con esta última definición estamos indicando que la imagen de submitir (el <input
type="image"> que hay dentro de la capa botonbuscar) no tenga borde.

.radio{
clear:both;
}

Esta clase, que afecta a las capas donde están los botones de radio, define que no deben haber
elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.

La caja de registro

En la siguiente caja del lateral aparece un pequeño texto invitando a registrarse al visitante.

<div id="registro" class="cuerpolateral">

<a href="#">Registrese con nosotros</a> y obtenga muchas ventajas.
</div>

Esta capa no tiene ningún estilo específico, simplemente se comporta heredando los estilos de
otras capas y con los que se han definido en las clases que se utilizan.

La caja de otras informaciones

Situaremos una última caja dentro del lateral, que contiene enlaces a otras informaciones.
Dentro de la caja colocaremos varios enlaces dentro de una lista.

<h2 class="titlat">Otras informaciones</h2>

<div id="otras" class="cuerpolateral">
<ul>
<li><a href="#">Quienes somos</a>
<li><a href="#">Nuestra misión</a>
<li><a href="#">Agenda de eventos</a>
</ul>
</div>

Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.

#otras ul{
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}

02/03/2005
CSS, hojas de estilos - Manual completo Página 34 de 36

Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan
los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno 4
pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se
desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a
continuación nosotros manualmente como fondo de los <li>.

#otras li{
padding-left: 14px;
background: transparent url("images/bullet.gif") 0 2px no-repeat;
margin-bottom: 10px;
}

Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la
izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes
que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se
define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro
diseño. También se define un margen en la parte inferior.

Después de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la página,
el diseño queda tal como se puede ver en esta página.
[http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/paso3.html]

Maquetar una página con CSS V

Apuntaremos los últimos retoques en el diseño de la página con CSS para finalizar el taller de
maquetación con CSS. Se puede ver la primera parte del artículo.
[http://www.desarrolloweb.com/articulos/1823.php?manual=2]

Pie de la página

Este elemento no lo habíamos previsto en la imagen original, creada previamente, pero lo

hemos decidido colocar porque lo necesitamos, para que en la parte donde está el cuerpo y el
lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningún
problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral
"flotando" a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el
container.

No se si se entiende esto bien, pero lo mejor es hacer una prueba y ver lo que hemos definido hasta el
momento en la plantilla en Firefox o Mozilla.
[http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/paso3.html] Veremos que el fondo blanco no
está continuado hacia abajo.

<div id="pie">
Pruebas de maquetación CSS © 2005 DesarrolloWeb.com
</div>

Esta capa tiene el siguiente estilo definido:

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}

Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y
derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo
y lateral.

Luego se define un color para el texto una alineación de texto, unos márgenes y un margen

02/03/2005
CSS, hojas de estilos - Manual completo Página 35 de 36

interno por la parte de debajo de 10 pixel.

El borde externo

El diseño original incluía un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer
la prueba de incluir un borde en la capa contenedor. Para ello hay que añadir en el estilo para la
capa contenedor el atributo border, de la siguiente manera.
#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}

En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su
problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya
asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional,
aparte del que se haya asignado a la capa en si.

Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle
solución sin tener que romperse la cabeza.

Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva
capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que
va a tener el estilo de borde definido.

<div id="borde">
<div id="contenedor">
.... contenido de toda la página
</div>
</div>

Para conseguir el borde se han definido el siguiente estilo para la capa borde.
#borde{
border: 2px solid #cccccc;
text-align: left;
width: 700px;
margin: auto;
}

Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para

contrarrestar el centrado al centro que tiene el body y que habíamos puesto para que Explorer
centrase la capa del contenido. También se incluye una anchura de 700 pixel y un margen
"auto" para que Mozilla y otros navegadores centren la capa.

El resultado final del ejercicio se puede ver en una página aparte.

[http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/] Por supuesto, conviene ver el resultado
final utilizando varios navegadores distintos.

Conclusión

Hemos visto cómo maquetar una página utilizando CSS paso a paso. Esperamos que hayáis
podido seguir el ejercicio y que ninguna dificultad os haya frenado. Realmente el trabajo con
CSS para la maquetación es una tarea fácil, pero también es muy sencillo encontrarnos con
escollos o problemas misteriosos que no parecen tener respuesta.

Sin ser un diseño complicado, realizar esta maquetación nos ha llevado varias horas de trabajo
y algún que otro padecimiento, que por suerte no ha llegado a desesperación. Sobretodo
existen dificultades a la hora de conseguir el diseño que se vea correctamente en todos los
navegadores del mercado. Este diseño lo hemos probado con éxito en Mozilla, Firefox,
Netscape, Opera y Explorer.

02/03/2005
CSS, hojas de estilos - Manual completo Página 36 de 36

Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro
consejo y el de otros desarrolladores, es diseñar con Mozilla o navegadores similares. Luego se
puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el
diseño. En este caso habrán pocas cosas que cambiar, mientras que si diseñamos para Explorer
y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque
nada esté en su sitio.

La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o
similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a
ello, igual que hicimos con los detalles relativos al HTML y la maquetación con tablas, CSS se
torna mucho más sencillo, potente y rápido de desarrollar.

Resultado final del ejercicio. [http://www.desarrolloweb.com/articulos/ejemplos/css/maqueta/]

Autores del manual:

Hay que agradecer a diversas personas la dedicación prestada para la creación de este manual.
Sus nombres junto con el número de artículos redactados por cada uno son los siguientes:

Miguel Angel Alvarez

Director de DesarrolloWeb.com
(22 capítulos)

Carlos Luis Cuenca

(1 capítulo)

Todos los derechos de reproducción y difusión [http://www.desarrolloweb.com/copyright/] reservados a Guiarte

Multimedia S.L. [http://www.guiartemultimedia.com/]

Volver [http://www.desarrolloweb.com/manuales/2]

02/03/2005