Introducción a CSS

Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML,
alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir
un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los
documentos electrónicos.

El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet
y el crecimiento exponencial del lenguaje HTML para la creación de documentos
electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los
estilos dificultaban la creación de documentos con la misma apariencia en diferentes
navegadores.

El organismo W3C (World Wide Web Consortium), encargado de crear todos los
estándares relacionados con la web, propuso la creación de un lenguaje de hojas de
estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos
propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y
la SSP (Stream-based Style Sheet Proposal).

La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert
Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje
que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).

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

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación

de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma
de separar los contenidos y su presentación y es imprescindible para crear páginas web
complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas

ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con
significado completo (también llamados "documentos semánticos"). Además, mejora la
accesibilidad del documento, reduce la complejidad de su mantenimiento y permite
visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para
marcar los contenidos, es decir, para designar la función de cada elemento dentro de la
página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de
cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical
entre elementos, posición de cada elemento dentro de la página, etc.

A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres
secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de
trabajo de CSS.
El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación
oficial, 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 8 de septiembre 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.

La adopción de CSS por parte de los navegadores ha requerido un largo periodo de

tiempo. El mismo año que se publicó CSS 1, Microsoft lanzaba su navegador Internet
Explorer 3.0, que disponía de un soporte bastante reducido de CSS. 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.

El trabajo del diseñador web siempre está limitado por las posibilidades de los
navegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo es
imprescindible conocer el soporte de CSS en cada uno de los navegadores más
utilizados del mercado.

Internamente los navegadores están divididos en varios componentes. La parte del

navegador que se encarga de interpretar el código HTML y CSS para mostrar las
páginas se denomina motor. Desde el punto de vista del diseñador CSS, la versión de un
motor es mucho más importante que la versión del propio navegador.

La especificación o norma oficial que se utiliza actualmente para diseñar páginas web
con CSS es la versión CSS 2.1, actualizada por última vez el 7 de junio de 2011.

CSS permite separar los contenidos de la página y la información sobre su aspecto. En

el ejemplo anterior, dentro de la propia página HTML se crea una zona especial en la
que se incluye toda la información relacionada con los estilos de la página.

Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin
ensuciar el código HTML de los contenidos con etiquetas <font>. Como se verá más
adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas
CSS que se aplican en la página.

En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1>
de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de
letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un
tipo de letra Verdana y con un tamaño de letra medio.

Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos
respecto a la solución anterior, pero sigue sin ser una solución ideal. Como los estilos
CSS sólo se aplican en la página que los incluye, si queremos que las 10.000 páginas
diferentes del sitio tengan el mismo aspecto, se deberían copiar 10.000 veces esas
mismas reglas CSS. Más adelante se explica la solución que propone CSS para evitar
este problema.
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis
especial, la forma de presentación que le aplicaremos a los elementos de la página.

Podemos aplicar CSS a muchos niveles, desde un sitio web entero hasta una pequeña
etiqueta. Estos son los principales bloques de acción.

• Un web entero, de modo que se puede definir en un único lugar el estilo de toda
una web, de una sola vez.
• Un documento HTML o página en particular. Se puede definir la forma de
cada uno de los bloques de contenido de una página, en una declaración que
afectará a un solo documento de un sitio web.
• Una porción del documento, aplicando estilos visibles en un trozo de la página,
como podría ser la cabecera.
• 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 márgenes, 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:

• Podemos definir la distancia entre líneas del documento.

• Se puede aplicar identado (sangrado) 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, márgenes,
subrayados, tachados...

Otra ventaja importante de CSS es la capacidad de espeficiar las medidas con diversas
unidades. Si 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).
• ... y muchas otras que explicaremos cuando llegue el momento

En este momento absolutamente todos los navegadores soportan CSS, por lo que puedes
usar este lenguaje con total seguridad y garantía. Pero no solo puedes, sino debes,
porque con CSS aumentas mucho la optimización del sitio web en varios términos, no
solo estéticos. Aplicando CSS correctamente, a nivel e sitio web completo, reduces el
peso en bytes de las páginas y mejoras su mantenibilidad. Como CSS ha sido
presentado por etapas y en distintas versiones, hay características avanzadas de la última
versión del lenguaje que puede que no se vean en todos los navegadores anticuados, nos
referimos principalmente a Internet Explorer 8 y anteriores. Hoy por suerte todos los
navegadores se actualizan por ellos mismos, lo que mejora el soporte a los estándares
como CSS y permite que los desarrolladores lo usemos con mayor confianza.

En estas páginas dedicadas a 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, pero sí ofrecer todos los conocimientos necesarios para
aprovechar el máximo de las posibilidades del lenguaje.

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.

Componentes de un estilo CSS básico

Los diferentes términos se definen a continuación:

• Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada
regla está compuesta de una parte de "selectores", un símbolo de "llave de
apertura" ({), otra parte denominada "declaración" y por último, un símbolo de
"llave de cierre" (}).
• Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
• Declaración: especifica los estilos que se aplican a los elementos. Está
compuesta por una o más propiedades CSS.
• Propiedad: característica que se modifica en el elemento seleccionado, como por
ejemplo su tamaño de letra, su color de fondo, etc.
• Valor: establece el nuevo valor de la característica modificada en el elemento.

Un archivo CSS puede contener un número ilimitado de reglas CSS, cada regla se puede
aplicar a varios selectores diferentes y cada declaración puede incluir tantos pares
propiedad/valor como se desee.

El estándar CSS 2.1 define 115 propiedades, cada una con su propia lista de valores
permitidos. Por su parte, los últimos borradores del estándar CSS 3 ya incluyen 239
propiedades.

Una de las características más importantes de las hojas de estilos CSS es que permiten
definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras,
móviles, proyectores, etc.

Además, CSS define algunas propiedades específicamente para determinados medios,

como por ejemplo la paginación y los saltos de página para los medios impresos o el
volumen y tipo de voz para los medios de audio. La siguiente tabla muestra el nombre
que CSS utiliza para identificar cada medio y su descripción.

Los medios más utilizados actualmente son screen (para definir el aspecto de la página
en pantalla) y print (para definir el aspecto de la página cuando se imprime), seguidos
de handheld (que define el aspecto de la página cuando se visualiza mediante un
dispositivo móvil).

Además, CSS clasifica a los medios en diferentes grupos según sus características. La
siguiente tabla resume todos los grupos definidos en el estándar.

La gran ventaja de CSS es que permite modificar los estilos de una página en función
del medio en el que se visualiza. Existen cuatro formas diferentes de indicar el medio en
el que se deben aplicar los estilos CSS

Las reglas @media son un tipo especial de regla CSS que permiten indicar de forma
directa el medio o medios en los que se aplicarán los estilos incluidos en la regla. Para
especificar el medio en el que se aplican los estilos, se incluye su nombre después de
@media. Si los estilos se aplican a varios medios, se incluyen los nombres de todos los
medios separados por comas.

Si los estilos del archivo CSS externo deben aplicarse en varios medios, se indican los
nombres de todos los medios separados por comas. Si no se indica el medio en una regla
de tipo @import, el navegador sobreentiende que el medio es all, es decir, que los
estilos se aplican en todos los medios.