HOJAS DE ESTILO.

INTRODUCCIÓN

Cuando hablamos de páginas Web, nos estamos refiriendo a un documento creado con código
HTML capaz de ser interpretado por un programa navegador de Internet, que será el que permita
visualizarlo. Las páginas Web han sido creadas para su visualización en pantalla pero esto está
cambiando y cada vez son más las necesidades de impresión (directamente a impresora o a un
archivo PDF) e incluso de nuevos medios como por ejemplo Screenreader para personas con
discapacidad visual.

ENLACES RELACIONADOS
Navegadotes
Screenreader
Editor HTML

El problema de los navegadores es que cada uno interpreta el código HTML y lo representa de forma
similar, pero en raras ocasiones se muestra exactamente igual.

PRÁCTICAS
IE HerramientasOpciones de InternetGeneralAccesibilidad
FIREFOXEditarPreferencias
OPERA

EL DISEÑO.

Hay muchas formas de construir páginas Web, pero la idea original era la creación de un sistema en
el que crear documentos con la separación del contenido y diseño del documento, de modo que a un
mismo documento se le puedan aplicar diferentes diseños, por ejemplo es posible crear un diseño
para la pantalla del PC, otro para la pantalla del móvil, otro para su impresión (directamente a
impresora o a un documento, etc.). Esto significa que a la hora de construir tendremos un núcleo (el
código HTML), sobre el que se acoplan diferentes capas que actuarán a la hora de mostrarla:
- CSS, para la pantalla.
- CSS, para la impresora.
- JavaScript (AJAX), para facilitar su interacción.

Estas capas van a cambiar su aspecto o apariencia para hacerlas más atractivas y eficientes. De
cualquier forma hay que tener en cuenta que no es posible conseguir que una misma página se
muestre exactamente igual en todos los navegadores, aunque lo que realmente debemos buscar es
que funcione correctamente en todos los navegadores y para todo tipo de usuarios.

Las hojas de estilo son conocidas normalmente como CSS (“Cascading Style Sheets”) y pretenden
separar el diseño de las páginas Web de su contenido. Han sido elaboradas en el seno del consorcio
W3, más conocido como el W3C, en cuyo sitio Web podemos encontrar todo lo relacionado con las
CSS. Recomiendo una visita a las guías breves:

ENLACES RELACIONADOS
W3C. Consorcio de la triple W.
http://www.w3c.org

Guías breves del W3C.

 http://www.w3c.org

En primer lugar veamos un ejemplo de lo que tenemos entre manos. Las hojas de estilo no cambian
el contenido de una página, sino su aspecto y de este modo pueden, no sólo embellecer la página,
sino además resaltar aquellas partes sobre las que es preciso llamar la atención del visitante.

Vemos un pequeño ejemplo que he encontrado en la página de DISEÑORAMA. En este ejemplo la

autora ha creado una página con un pequeño código en JavaScript para eliminar el efecto de las
hojas de estilo en la página:

PRÁCTICAS
Veamos un ejemplo en el que mostramos el contenido de una página
con las hojas de estilo habilitadas o deshabilitadas. Pulse el enlace…
Puede abrir el archivo HTML desde este enlace.

En estas dos imágenes estamos viendo la misma página, la de la izquierda muestra el efecto de
aplicar las hojas de estilo sobre el código HTML, mientras que la de la derecha presenta el estilo
propio del navegador que está usando y muestra el contenido sin apenas estilos aplicados. Juzgue por
sí mismo si el tiempo empleado en aplicar hojas de estilo merece la pena para conseguir un resultado
final mejor.

Construir páginas Web con hojas de estilo requiere un nuevo concepto de esta tarea, es preciso partir
de documentos HTML bien estructurados carentes de formato para los elementos utilizados, para
posteriormente aplicar el diseño según las posibilidades que nos proporcionan las hojas de estilo.

El sistema de trabajo recomendado para crear una página Web es el siguiente:

1. Escribir el contenido de la página con código HTML, bien escribiendo directamente el
código sobre un editor de textos, bien utilizando alguno de los conocidos editores HTML que
existen en la Red, como Dreamweaver, Frontpage, Composer y otros. Es recomendable
utilizar siembre minúsculas para las etiquetas HTML.
2. Definir los estilos a aplicar en un archivo independiente que después cargaremos desde la
cabecera de nuestra página Web.
3. Abrir la página Web con el navegador para observar los resultados obtenidos.
4. Si lo considera necesario, realice los cambios oportunos para probar cambios sobre el estilo
de la página.
 5. Una vez concretado el diseño definitivo, podemos aplicarlo a todos los documentos HTML
que queramos.

Vemos esto poco a poco en los siguientes apartados, para finalmente siguiendo estos cinco pasos
construir nuestro sitio Web con diseño CSS.

CÓMO AÑADIR ESTILO A UNA PÁGINA:

Hay tres modos de aplicar estilo a una página Web, y todos ellos suceden en la cabecera de la página:
- Estilo predefinido que se carga directamente de Internet. Hay ocho estilos de este tipo que
podemos usar libremente, pero para ser usados requieren que estemos permanentemente
conectados a Internet, lo que por otra parte es imprescindible si lo que queremos es difundir
nuestra página.
- Insertando código CSS en la cabecera entre las etiquetas <style…> y </style>.
- Y por último el sistema más recomendable, utilizar un archivo independiente para definir los
estilos de la página. Después se añade a la página Web mediante una etiqueta similar a esta:
<link rel="stylesheet" href="estilos/estilo-v3.css" type="text/css">

Este sistema tiene la ventaja de que podemos incluirlo en cualquier página que queramos que
adopte ese estilo.

Estilo desde Internet.

Existen diferentes estilos predefinidos en Internet y sólo tenemos que invocarlos mediante una
instrucción similar a esta:
<link href=”http://www.w3.org/StyleSheets/Core/Traditional”
rel="stylesheet" type="text/css" />

Para cambiar de estilo sólo hay que sustituir la palabra Tradicional por cualquiera de los estilos que
se muestran a continuación:
Traditional-Midnight-Ultramarine-Chocolate-Oldstyle-Modernist-Steely-Swiss

Si no hay conexión a internet, no tendrá estilo y su apariencia será idéntica a la página sin estilos.

Estilo dentro de la misma página.

Básicamente incluimos una etiqueta <style… en la que se hacen las definiciones de los estilos de los
diferentes elementos HTML. En los comentarios del ejemplo podemos entender perfectamente el
modo en que actúa la CSS.
<style type="text/css">
body{ /* Aplicamos estilo exclusivamente al cuerpo de la página */
background-color:#efefef; /* Color de fondo gris */
color:#666666; /* Color del texto (fuente) */
font:11px/16px Arial, Helvetica,sans-serif; /* Estilo de la fuente */
}
</style>

Estilo en un archivo externo de extensión “.css”

Finalmente la opción más utilizada, es la de crear un archivo independiente de estilos, de modo que
cualquier página que necesite utilizar este estilo, sólo tiene que incluirlo mediante una instrucción
similar a la siguiente:
 <link rel="stylesheet" href="estilos/estilo-v3.css" type="text/css">

En esta instrucción podemos observar que el archivo con el estilo tiene extensión “.css”. Además en
este caso su nombre es “estilo-v3.css” y también vemos que ese archivo está ubicado en un
subdirectorio o carpeta con el nombre de “estilos”.

Podemos ver este ejemplo sobre el modo de incorporar las hojas de estilo a una página Web, en el
siguiente enlace:

PRÁCTICAS
El ejemplo que proponemos a continuación, permite ver las diferentes
hojas de estilo que podemos utilizar con una misma página con los
diferentes modos de hacer uso de ellas. Pulse el enlace y abrirá una
página Web con los enlaces adecuados…
EjemplosCSS/index-ej-css.html

CÓMO ESCRIBIR EL CONTENIDO HTML:

Para crear el documento HTML al que le vamos a aplicar el diseño mediante CSS, no hay que hacer
ninguna operación previa, aunque es recomendable utilizar el modelo de cajas, mediante el que
estructuramos las diferentes zonas en bloques rectangulares tal y como hemos podido observar en el
ejemplo anterior.

Para crear el documento HTML podemos utilizar cualquier editor de texto plano o también editores
HTML, nosotros recomendamos el KIT-HTML, gratuito y muy potente.

ENLACES RELACIONADOS
HTML-KIT
http://www.HTMLKIT.es

A la hora de crear una página Web es preciso seguir cierto orden en lo que a la estructura de
directorios y archivos se refiere, y es importante establecerla de forma previa y mantenerla durante
todo el proceso de creación. Nosotros vamos a establecer la siguiente estructura de directorios, en los
ejemplos que vamos a seguir en todo este curso:
Ejercicio:

En el ejemplo anterior podemos ver el código fuente de cada uno de los archivos de contenido
(HTML) y de diseño (CSS), con comentarios sobre dichos códigos de modo que resulte sencillo
comprender lo que hace cada una de las líneas de instrucciones del código.

Pero lo ideal para aprender hojas de estilo es practicarlas, de modo que partiendo de todo lo visto
hasta ahora (especialmente de los ejemplos), os propongo el siguiente ejercicio:
1. Crear una página Web sobre un tema libre (relacionado con el currículo de 2º de
Bachillerato) siguiendo las indicaciones que detallamos a continuación.
2. Utilizar una página inicial compuesta por las capas que se utilizan en la versión tres del
ejemplo (principal, encabezado, navegación, contenido y pie).
3. La página principal debe seguir el formato e indicaciones de la siguiente página:

4. Debe tener al menos cinco apartados, aunque alguno de ellos puede estar destinado a
ejercicios, curiosidades, enlaces, etc.
5. Cada uno de los apartados debe seguir la estructura e indicaciones de la siguiente página de
muestra:

6. Finalmente debes aplicar un diseño personal mediante un archivo independiente de estilos.

Direcciones de Interés:
Consorcio de las Tres W.
http://www.w3c.es/

Guía de Referencia Rápida CSS

http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

Guía de Referencia Rápida XHTML

http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/

Ejemplos del uso de CSS, ZenGarden

http://www.csszengarden.com/

Ejemplos de uso de CSS en español, Camaleón

http://www.camaleoncss.com/1/p1/camaleon.html

Web Developer
http://chrispederick.com/word/webdeveloper/

Manual de CSS
http://www.manualdecss.com/

Tutoriales CSS en Scour Design

http://www.scourdesign.com/articulos/tutoriales/css/

Plantillas de Diseño. Open Source Web Design.

http://www.oswd.org/

Plantillas CSS con diversas técnicas

http://www.intensivstation.ch/templates/