Introducción

En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS,
que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la
presentación. Es un mecanismo simple que describe cómo se va a mostrar un documento en la
pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente
en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos
ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿Qué es CSS?
CSS es la abreviatura empleada para referirse a Cascade Style Sheets (Hojas de Estilo en
Cascada) y es la tecnología empleada para solventar los conflictos que genera el excesivo uso
de tablas y “trucos” en HTML, y de esta manera separar la presentación del contenido.

Con el uso de las CSS, se le indica al documento el estilo de cada elemento en la página a
través del uso de un archivo externo y no directamente en el código HTML, de esta manera,
cada cambio que se realice no tendría que hacerse a cada página sino que afectaría a todos
los elementos vinculados con esa hoja de estilo, lo cual es muy útil para sitios que contengan
muchas páginas.

Historia de las CSS

Las hojas de estilo hicieron su aparición alrededor del año 1970, poco después de la creación
del lenguaje de etiquetas SGML, donde ya se observó la necesidad de un estándar que
permitiera aplicar diferentes estilos de forma rápida y eficaz sobre distintos documentos
electrónicos.

Con la expansión de internet, y el crecimiento del lenguaje HTML, surgieron varios tipos de
navegadores y con ellos, la dificultad de visualizar un sitio web con la misma apariencia en
todos ellos. El organismo 3wC (World Wide Web Consorcium) , organismo encargado de crear
los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos
específico para HTML y, de las 9 propuestas que fueron presentadas, se eligieron dos: la
CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal). Los dos
responsables de cada propuesta, se unieron para definir uno común escogiendo lo mejor de
cada uno, y así fue como, entre 1994 y 1995 nació lo que hoy conocemos como CSS.

En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su

grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial,
conocida como “CSS nivel 1”.
En mayo de 1998 se publica la segunda recomendación oficial, la conocida como “CSS nivel
2”. La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1, una
revisión de CSS 2 que aún se está elaborando (la última actualización es del 23 de abril de
2009). Al mismo tiempo, la siguiente recomendación de CSS, conocida como "CSS nivel 3",
continúa en desarrollo desde 1998 y hasta el momento sólo se han publicado borradores.

El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet
Explorer 5, que se publicó en el año 2000. Por el momento, ningún navegador tiene soporte
completo de CSS 2.1.De hecho, uno de los navegadores más utilizados, Internet Explorer 6,
tiene un soporte limitado de CSS 2 y decenas de errores conocidos en la parte de CSS 2 que
implementa, lo que dificulta la creación de páginas con un aspecto homogéneo entre diferentes
navegadores. Está parcialmente corregido en Internet Explorer 8, aunque necesita de etiquetas
meta para soportarlo en versiones anteriores. Los navegadores con mejor soporte de CSS 2
(incluso con soporte de algunas características de CSS 3) son: Firefox, Opera y Safari. Desde
la publicación de la versión CSS 2, se han añadido pequeñas correcciones de errores y
algunas variaciones en el estándar, hasta llegar a la actual versión CSS 2.1.

Ventajas de las CSS

Separar nuestro código HTML del diseño (CSS) nos va a permitir tener un código más limpio y
claro y a la postre reutilizable.

Una de las ventajas, de cara a los diseñadores, es que nos permiten modificar el aspecto del
diseño de un sitio web modificando únicamente la hoja de estilo aportando un importante
ahorro de tiempo y esfuerzo. Sin las hojas de estilo deberíamos realizarlo página a página.

De cara a los usuarios mostraremos una mayor homogeneidad en la Web, sin esfuerzo
considerable añadido.

Teniendo en cuenta los diferentes soportes de comunicación existentes, los CSS nos permiten
definir estilos para la visualización en una PDA ó en un PC. Así como crear hojas especiales
para impresión (sin banners ni imágenes de publicidad) ó para sintetizadores de voz.

Para los buscadores el contenido importante es el primero aparece, a través de CSS, podemos
lograr que los elementos aparezcan en el orden que deseemos (contenido principal, menú
izquierdo, menú principal, cabecera), permitiéndonos mejorar el posicionamiento en internet.

El uso del estándar CSS de la W3C evitará visualizaciones erróneas de nuestra web en los
diferentes navegadores.
 Anatomía de los estilos
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más
elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un
documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la
declaración está compuesta por una propiedad y el valor que se le asigne.

 Selectores: Indican sobre que elementos queremos trabajar.

 Atributos: Identifican a que estilo nos referimos.
 Valores: Indican como queremos que sea ese atributo.

H1 { align: left; }
Selector { propiedad: valor; }

La primera parte, fuera de los corchetes es el Selector, y es el que indica a qué elemento
HTML afectará (en el ejemplo a las cabeceras de nivel 1). Lo que hay dentro de los corchetes
es la Declaración, que a su vez está formada por una Propiedad (en este caso align) a la que
se le asigna un Valor (en este caso left).

La sintaxis de CSS es muy simple, consiste en poner el nombre del atributo, seguido por dos
puntos y el valor que se le asigna. Además, si queremos escribir varios estilos los separaremos
por punto y coma y/o opcionalmente un salto de línea:

Color: #000000;
Background: #FFFFFF;

Siempre que lo hagamos desde una página externa, deberemos indicar a qué elemento de la
página aplicamos ese estilo. Esto lo haremos con los Selectores. Escribiremos el selector
seguido de los atributos del objeto entre corchetes:

Input {
Color: #000000;
Background: #FFFFFF;
}
Selectores

Una de las cosas más importante respecto a los estilos CSS, es que cualquier elemento HTML
es un posible selector CSS. Un selector es el elemento que está conectado a un estilo
particular:

p { font-size: 3em; }

En este ejemplo, el selector es p . De este modo todo lo que en el documento HTML se

encuentre entre la etiqueta <p></p>, tendrá esta característica (en el ejemplo relacionada con
el tamaño del texto).

Selectores de clase

Si queremos alcanzar mayor control sobre nuestros estilos podemos utilizar los selectores de
clase, que permiten aplicar un estilo a una etiqueta html específica. Mediante un selector de
clase, podemos dar estilo simultáneamente a varios elementos HTML. Puede ser usado más
de una vez para controlar la apariencia de algunos elementos.

<p class="distinto">Párrafo en rojo</p>

Siendo definido en la propia hoja de estilo de esta manera:

.distinto { color: red; }

En el ejemplo, todos los parrafos existentes en nuestra página que sean de clase distinto, y
sólo estos párrafos, apareceran de color rojo.

La principal característica de este selector es que en una misma página, varios elementos
diferentes pueden utilizar el mismo valor en el atributo class, pudiendo reutilizar los mismos
estilos para varios elementos diferentes.

<p class="distinto">Párrafo en rojo</p>

<p>Párrafo normal <a href="#" class="distinto">Enlace en rojo</a></p>

En el ejemplo, tanto el párrafo como el enlace con clase distinto apareceran en color rojo.

Podemos restringir el alcance del selector de clase combinándolo con el selector de tipo en la
hoja de estilos.

Regla Interpretación

.distinto { Cualquier elemento de la página cuyo atributo class sea igual a distinto
color: red; }

p.distinto { Aquellos elementos de tipo <p> que dispongan de un atributo class con valor distinto
color: red; }

p .distinto Todos los elementos con atributo class="distinto" que estén dentro de cualquier elemento de
{ tipo<p>
color: red; }

p, .distinto Todos los elementos de tipo <p> i todos los elementos de la página cuyo
{ atributo class sea igual adistinto
color: red; }

Selectores ID (identificadores)

Otra característica muy importante de CSS es la herencia, donde determinadas etiquetas se

ven supeditadas a lo que tenga definida una etiqueta de nivel superior. Entran en juego los
selectores ID que a modo de ejemplo aplican formato a una etiqueta específica dentro de otra
etiqueta.

Hemos dicho que la anterior definición p { font-size: 3em; } daría formato a todos los
párrafos existentes en nuestra página, pero si queremos dar un formato determinado a uno de
los párrafos sin variar todos los demás, usamos un selector ID aplicado al párrafo específico.
Sería así:

<p id="cambio">Este cambiará de tamaño</p>

Siendo definido en la propia hoja de estilo de esta manera:

#cambio { font-size: 1.5em; }

Todos los párrafos tendrán la herencia de p { font-size: 3em; }, pero este nuevo
selector ID, es más específico y sólo se aplicará al párrafo con id="cambio". De esta manera
hemos definido una regla general para los párrafos, pero la podremos alterar siempre que
queramos de manera específica sin tener que redefinirlo todo.

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML
y no con CSS. En una misma página, el valor del atributo id debe ser único, de forma que dos
elementos diferentes no pueden tener el mismo valor de id. Sin embargo, como ya hemos
dicho, el atributo class no es obligatorio que sea único, de forma que muchos elementos
HTML diferentes pueden compartir el mismo valor para su atributo class.

De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere

aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase
cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

Al igual que los selectores de clase, en este caso también se puede restringir el alcance del
selector mediante la combinación con otros selectores. La sintaxis de los selectores de ID es
muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla
(#) en vez del punto (.) como prefijo del nombre de la regla CSS.

Selector Contextual o Descendiente

Un selector contextual selecciona y aplica las propiedades CSS a los elementos que estan
contenidos dentro de otros elementos HTML.

Por ejemplo, modificaremos la apariencia de todos los elementos <em> que estén dentro de los
elementos<p>.

<p><em>texto 1</em></p>
<div><em> texto 2</em></div>

Siendo definido en la propia hoja de estilo de esta manera:

p em { color: olive; }

Con esta regla CSS conseguiremos que el texto 1 cambie de color ya que está dentro de la
etiqueta <em>, que esta contenida en <p>. Pero el texto 2 no se cambiará porque aunque hay
un selector <em>, éste no se encuentra dentro de <p>.

Los selectores contextuales pueden ser muy específicos, por ejemplo si tenemos un código de
este tipo:

<div>
<ul>
<li> texto A </li>
<li><a href="#">texto B</a></li>
<li> texto C </li>
</ul>
</div>

Siendo definido en la propia hoja de estilo de esta manera:

div ul li a { color: yelow; }

Con esta regla seleccionaremos todos los elementos <a> que estén dentro de <li>, y que
estén también dentro de <ul> y que a la vez estén incluidos dentro de <div>.

Selector Universal

Este tipo de selector, selecciona todos los elementos sin excepción. Para aplicarlo
escribiríamos al inicio de la hoja de estilo el símbolo *, y luego las propiedades que queramos
para todo el documento HTML.

Por ejemplo:

* { margin:0; padding:0; }

Con esta regla eliminamos los márgenes y rellenos de los elementos HTML que por defecto
presentan los navegadores.

Hojas de estilo externas o incrustadas

Existen tres formas distintas de aplicar estilo a una página web: reglas de estilo en línea, hojas
de estilo incrustadas y hojas de estilo externas. Las reglas en línea se aplican a un solo
elemento en un documento HTML, las hojas incrustadas se aplican a todo un documento y las
hojas externas pueden aplicarse a varios documentos. Se pueden usar los tres tipos en un solo
documento y cada uno de ellos tiene preferencia sobre los siguientes.

Reglas de estilo en línea

Las reglas de estilo integradas o en línea son la forma más elemental de usar CSS. Se trata
simplemente de asignar una regla a una etiqueta HTML por medio del atributo style. Por
ejemplo:

<p style="color:00ff00; font-family:Verdana;">Párrafo de texto</p>

 Este párrafo y sólo éste, sin afectar a todos los demás, aparecerá en color rojo y con
fuente Verdana. Es una forma muy simple y poco eficiente de usar CSS, porque deberíamos
repetir la regla cada vez que queramos el texto en rojo y Verdana.

Las reglas de estilo integradas únicamente se recomiendan para aplicar un estilo muy
específico a un elemento en concreto.

Hojas de estilo incrustadas

Las hojas de estilo incrustadas se definen en la cabecera <head> del documento mediante la
etiqueta<style>, y se aplican a todo el documento. Por ejemplo:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Hoja de estilo incrustada (CSS)</title>
<style type="text/css">
p {color:00ff00; font-family:Verdana;}
</style>
</head>

Ahora, todos los párrafos de texto del documento apareceran de color rojo y Verdana, salvo si
se entra en contradicción con una regla de estilo en línea que prevalece sobre la hoja de estilo
incrustada. El atributotype de la etiqueta <style> indica al explorador que el lenguaje usado
en las hojas de estilo es CSS.

Las hojas de estilo incrustadas se usan cuando el número de estilos en un documento es muy
pequeño o para completar los estilos que se aplican por defecto en todo el sitio web mediante
hojas de estilo externas.

Hojas de estilo externas

Las hojas de estilo externas son documentos de texto, con la extensión .css, que almacenan
todas las reglas de estilo y que pueden ser llamados por tantos documentos HTML como se
quiera mediante la etiqueta<link> de la cabecera <head>. El procedimiento es:

 Se crea un archivo de texto con las reglas de estilo:

p {color:00ff00; font-family:Verdana;}

 Se guarda el archivo como estilos.css (atención con la extensión!)

 Se llama la hoja de estilos desde el documento HTML mediante la etiqueta <link>:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Hoja de estilo externa (CSS)</title>
<link href="estilos.css" rel="stylesheet" type="text/css"
media="screen" />
</head>

La etiqueta <link> puede incluir cuatro atributos para enlazar con un archivo CSS:

Atributos
Descripción
etiqueta <link>

href Indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y
puede apuntar a un recurso interno o externo al sitio web.

rel Indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS ) y la página
HTML . Para los archivos CSS , siempre se utiliza el valor stylesheet.

type Indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor
siempre estext/css.

media Indica el medio en el que se van a aplicar los estilos del archivo CSS .

Al leer el valor del atributo media, el explorador web puede descargar selectivamente archivos
de hojas de estilo aplicables únicamente a los medios utilizados por el explorador. Por ejemplo,
el explorador web puede impedir la descarga de la siguiente hoja de estilo que se aplicará
a tv (es decir, televisión) al mostrar documentos HTML en la pantalla de un equipo estándar:

<link href="webtv.css" rel="stylesheet" type="text/css" media="tv" >

Los tipos de medio de hojas de estilo en cascada de nivel 2 (CSS 2) son:

Descriptor de tipo de
Aplicar reglas de hojas de estilo a ...
medios

all Todos los dispositivos

aural Sintetizadores de voz

braille Dispositivos táctiles y de braille

embossed Impresoras de páginas de braille

handheld Dispositivos de mano (como PDA)

print Medios de páginas (como una página impresa) o páginas que se muestran en pantalla (como una
"presentacion preliminar").

projection Proyectores y dispositivos de impresión en diapositivas y transparencias

screen Pantallas en color de ordenadores

tty Dispositvos con cuadrículas de caracteres de punto fijo, como teletipos

tv Dispositivos del estilo de la televisión (baja resolución, color, desplazamiento limitado, dispone
de sonido).

Las hojas de estilo externas son las más utilizadas porque permiten dotar de un aspecto
 uniforme a todo un sitio web. Basta con enlazar cada página del sitio a la hoja de estilos. De
esta forma, el mantenimiento se simplifica al máximo porque sólo con modificar el archivo CSS
se puede cambiar todo el diseño del sitio, garantizando la aplicación homogénea de estilos en
todas las páginas.

Aunque generalmente se usa la etiqueta <link> para enlazar los archivos CSS externos,
también puede hacerse mediante la etiqueta <style>, con una regla especial de
tipo @import.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hoja de estilo externa (CSS)</title>
<style type="text/css">
@import 'estilos.css';
</style>
</head>

La URL del archivo CSS externo se indica mediante una cadena de texto entre comillas
(simples o dobles) o mediante la palabra reservada url(). Así, son equivalentes las siguientes
reglas import:

@import 'estilos.css';
@import "estilos.css";
@import url('estilos.css');
@import url("estilos.css");

Enlaces

 Manual de referencia de las hojas de estilo en cascada

(CSS1): http://www.jorgesanchez.net/web/css1.pdf
 Manual de CSS, con ejemplos: http://xml-utils.com/conferencia-css.html#d0e769
 Página práctica sobre hojas de estilo CSS: http://www.cssya.com.ar/index.php?inicio=30
 Práctico y completo tutorial sobre hojas de estilo en cascada
(CSS): http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
 Guía de Referencia W3C: http://www.w3c.es/divulgacion/guiasbreves/hojasestilo
 Wikipedia: http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada
 Curso XML sobre Hojas de Estilo: http://geneura.ugr.es/~maribel/xml/css/index.html
 Tutorial de iniciación a CSS:http://www.librosweb.es/css/
 Tutorial de CSS: http://www.w3schools.com/css/default.asp
 Curso de CSS con ejemplos: http://www.chesco.info/curso/css.htm