PDF de programación - Manual de CSS, hojas de estilo

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com


Manual de CSS, hojas de estilo

Tutorial completo y práctico sobre hojas de estilo en cascada (CSS). Aprende a utilizar esta
tecnología que te ayudará a crear páginas más atractivas y precisas. El curso contiene la
descripción, uso, sintaxis, y lista de atributos para crear estilos

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:

Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
(27 capítulos)

Federico Elgarte
http://www.cssboulevar.com.ar/
(1 capítulo)

Fernando Campaña
Programación - Multimedia
http://www.rakidwam.com.ar/
(2 capítulos)

Leonardo A. Correa
http://www.webnova.com.ar
(1 capítulo)

José Juan Corpas Martos
http://www.recursosflash.es
(2 capítulos)

Serviweb
Diseño web Murcia
http://www.serviweb.es/
(1 capítulo)

Manu Gutierrez
http://www.tufuncion.com
(1 capítulo)

Manual de CSS, hojas de estilo: http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

1

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Parte 1:
Qué es CSS

Comenzamos presentando las Hojas de Estilo en Cascada y explicando de qué manera
ayudan a los diseñadores de páginas web.

1.1.- Introducción a las CSS
Una breve introducción a CSS, para las personas que no saben nada sobre la tecnología el por qué de su
creación y cómo ayuda a hacer páginas web mejores.

Entramos en materia con los antecedentes de CSS, las razones por las que se han desarrollado las hojas de estilo en
cascada, y los objetivos que trata de cumplir.
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&aacuteen 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.

Referencia: Este manual trata los aspectos más teóricos de las hojas en cascada. En DesarrolloWeb.com también podemos encontrar otro
manual con unos talleres prácticos de aplicación de las CSS.

A lo largo del Manual de CSS veremos diferentes estados de las Hojas de Estilo en Cascada, pues han ido evolucionando
con el paso de los años. En este manual se estudiarán principalmente las especificaciones de CSS 1 y CSS 2 y dedicaremos
un texto diferente al estudio de la más moderna especificación del lenguaje en estos momentos, su tercera especificación, en
el Manual de CSS 3.
Además, para las personas que lo deseen, hemos realizado diversos videotutoriales que serán especialmente interesantes para
las personas que quieran aprender CSS de una manera práctica y visual. Está todo en el Videotutorial de CSS.

Manual de CSS, hojas de estilo: http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

2

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Artículo por Miguel Angel Alvarez

1.2.- Características y ventajas de las CSS
Conoce las principales características del lenguaje, su potencia y sus posibilidades.

El modo de funcionamiento 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 esta forma:

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

• Podemos definir la distancia entre líneas del documento.
•
• 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)

1.2.1.- 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.

Artículo por Miguel Angel Alvarez

Manual de CSS, hojas de estilo: http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

3

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com

Parte 2:
Distintas maneras de
incluir estilos

Existen distintas formas de definir estilos en una página, a diversos niveles que van
desde las más específicas, que permitirían definir estilos en un pequeño texto de una
página, hasta las más generales, para definir estilos para toda una página o incluso un
sitio web.

2.1.- Usos de las CSS I
Describimos las distintas aplicaciones de las Hojas de Estilo en cascada. En este capítulo veremos las más
sencillas.

CSS sirve para definir el aspecto de las páginas web, eso ya debe haber quedado claro. No obstante, hay diferentes niveles a
los que podemos aplicar los estilos y es algo que vamos a describir ahora.
Hemos denominado a este apartado los diferentes usos de las CSS y relata justamente eso, los distintos niveles a los que
podemos usar las Hojas de Estilo, que van desde definir los estilos de manera específica, para un pequeño fragmento de una
página, hasta los estilos para todo un sitio web completo. Todo esto pasando por diversos otros niveles que resultarán de
mucha utilidad también en nuestro día a día como diseñadores.
Vamos por orden, describiendo los puntos desde el más específico al más general, de manera que que también iremos
aumentando la dificultad e importancia de los distintos usos. 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.

Nota: CSS tiene una sintaxis propia. En este artículo ofreceremos diversos códigos de CSS, aunque no hemos explicado la sintaxis todavía.

A través de los próximos ejemplos veremos una pequeña introducción a la manera de escribir código CSS, pero lo explicaremos con detalle
más adelante cuando tratemos la sintaxis CSS.

2.1.1.- 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.

Manual de CSS, hojas de estilo: http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.htm