María Jesús Lamarca Lapuente. Hipertexto: El nuevo concepto de documento en la cultura de la imagen.

El lenguaje HTML definía la estructura y la semántica de los documentos y se centraba, sobre todo, en el contenido, ya que surgió como medio de comunicación entre los científicos. Sin embargo, el éxito de la Word Wide Web amplió el abanico de usuarios y poco a poco fue cobrando importancia no sólo el contenido, sino también el diseño y la presentación de la información. Los diseñadores de webs y los editores de páginas HTML comenzaron a integrar nuevas funciones y las sucesivas versiones de HTML incluyeron nuevas etiquetas capaces de realizar esas funciones. 

Sin embargo, la diversidad de plataformas y navegadores que recogían de distinta forma estas nuevas versiones, condujeron a que en la última versión de la especificación HTML, la 4.0, se volviera hacia el objetivo inicial que era dar importancia a las características que afectaban a la estructura y a la semántica de los documentos, y no a su diseño o aspecto físico, desaconsejando el uso de ciertos elementos y atributos relacionados con la presentación del documento. En esta especificación también se propone delegar todas estas características de presentación y diseño en las hojas de estilo.  

Una hoja de estilo (style sheets) no es más que una colección de reglas que afectan a la apariencia de un documento. Estas reglas se refieren al modo en que aparecerá un documento en pantalla cuando el usuario utilice un navegador o explorador gráfico, controlando por ejemplo el color, el fondo, tipo de fuente, apariencia de los bordes, márgenes, alineación y espacio entre caracteres.

El HTML 4.0 desplaza muchas de las funciones realizadas por las anteriores versiones hacia las hojas de estilo, reservando el lenguaje HTML para cuestiones menos formales, relativas a la propia organización del contenido, y lo mismo ocurre con el lenguaje XML.

Las ventajas que ofrece la utilización de hojas de estilo es que se diseñan de forma independiente al documento HTML y que se se pueden aplicar, enteras o alguno de sus niveles, a los documentos que se desee, facilitando la consistencia y homogeneidad en el diseño y la imagen del sitio web. Además, las hojas de estilo se pueden adecuar a los distintos medios de presentación de documentos (pantallas del ordenador, impresoras, televisores, navegadores basados en voz, documentos en Braille...). El usuario también puede elegir qué tipo de diseño prefiere visualizar en un mismo documento: desde un formato más simple o tradicional, a uno más sofisticado. Una ventaja adicional es que reducen el tiempo de carga de las páginas web en el ordenador, puesto que las hojas de estilo se cargan en el navegador o visualizador, de manera que al acceder a un documento que incluya la misma hoja de estilo de otro que se ha "bajado" anteriormente no será necesario volver a cargarla, porque ya se encuentra en el ordenador cliente. 

Actualmente el tipo más común de hoja de estilo es la hoja de estilo en cascada (CSS) o Cascadind Style Sheets. Existen varias especificaciones y niveles desarrollados por el W3 Consortium (http://www.w3.org/).

CSS, es una tecnología que nos permite crear páginas web de una manera más precisa y homogénea. Gracias a las CSS controlamos más aún los resultados finales de la página, pudiendo hacer muchas cosas que no se podían hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores, etc.

Las Hojas de Estilo en Cascada son un estándar muy amplio que actualmente cuenta con las siguientes especificaciones:

En 1996 el W3C sacó la Recomendación de nivel 1 (CSS1-Cascading Style Sheets Specification, level 1. http://www.w3.org/TR/REC-CSS1-961217.html) y posteriormente apareció la Recomendación de nivel 2 (Cascading Style Sheets, level 2, CSS2 Specification http://www.w3.org/TR/REC-CSS2/) y en 2004 hay varios trabajos y especificaciones en desarrollo candidatos a Recomendación de nivel 3 (http://www.w3.org/Style/CSS/current-work).

El lenguaje de hojas de estilo de nivel 1 permite a los autores y usuarios adjuntar estilo (por ejemplo, fuentes, espaciado, etc. a la estructura de los documentos HTML y a las aplicaciones XML. Al separar el estilo de presentación de los documentos del contenido, CSS simplifica la creación de páginas web y su mantenimiento.

CSS2 se construye sobre CSS1 y, con unas pocas excepciones, tolo lo que era válido en las hojas de estilo CSS1 es válido para CSS2. CSS2 soporta especificaciones media de estilo así que los autores  pueden diseñar la presentación de sus documentos para los navegadores gráficos, impresoras y otros dispositivos. Esta recomendación también soporta posicionamiento del contenido, descarga de fuentes, disposiciones de pantalla, herramientas de internacionalización, contadores automáticos y otras propiedades relacionados con la interfaz del usuario.

La especificación CSS3 está todavía en construcción, ya que consta de una serie de módulos como Hyperlink Presentation Module (módulo que contiene las funcionalidades requeridas para describir la presentación de las anclas de los enlaces y los efectos de la activación de los enlaces: http://www.w3.org/TR/css3-hyperlinks/), Text Module, Color Module, Borders Module, List Module, Speech Module, etc.

Las Hojas de Estilo en Cascada se pueden escribir dentro del código HTML (o XML) de la página web o en un archivo aparte, en este último caso hay que enlazar la página con ese archivo mediante una declaración en archivos externos.

La manera más directa de aplicar estilos a los elementos de la página se hace a través de la etiqueta HTML: style.

<p style="color:blue;font-weight:bold">El párrafo saldrá con color azul y en negrita</p>

Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma (;). En el ejemplo anterior hemos utilizado el atributo color (indica el color del contenido) y el atributo font-weight (indica el grosor del texto. Bold sirve para ponerlo en negrita). 

Pero existen otros muchos atributos tales como:

Color en los enlaces: con HTML definimos el color de los enlaces en la etiqueta <body>, con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento.

Si queremos cambiar el color de un enlace en concreto, por ejemplo, ponerlo en rojo para que tenga otro color que el definido en la etiqueta <body> se utiliza el atributo style dentro del enlace:

<a href="mienlace.html" style="color:red">

Espaciado entre líneas: con CSS podemos definir el espacio que hay entre cada línea del documento, utilizando el atributo line-height. Por ejemplo, podemos definir que para todo un párrafo el espacio entre cada una de sus líneas sea 40 píxeles:

<p style="line-height: 40px;">

Todos los ejemplos anteriores sirven para aplicar estilo a una página web concreta. Sin embargo, una de las características más potentes de la programación con hojas de estilo consiste en 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.

El proceso para incluir estilos con un archivo externo es el siguiente:

•  Se crea un archivo con la declaración de estilos: se trata de un archivo de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para saber de qué tipo de archivo se trata. El texto que debemos incluir debe escribirse exclusivamente en sintaxis CSS, que es un poco distinta de la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML con etiquetas en este archivo. He aquí un ejemplo:

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;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

•  Se enlaza la página web con la hoja de estilos: para ello se coloco la etiqueta <LINK> con los atributos:

•  rel="STYLESHEET" indicando que el enlace es con una hoja de estilo.
•  type="text/css" porque el archivo es de texto, en sintaxis CSS.
•  href="estilos.css" indica el nombre del archivo fuente de los estilos.

que quedará de la siguiente forma:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos.
</p>
</body>
</html>

Las hojas de estilo son muy útiles para grandes proyectos en la World Wide Web como la edición de una enciclopedia en línea compuesta de miles de páginas y referencias, o para la edición de un periódico online que se deba actualizar diariamente. De esta forma se pueden crear muchas páginas con un diseño homogéneo y es más fácil su mantenimiento y actualización.

Así pues, para indicar que en un documento HTML se quiere incluir un rasgo de estilo que está incluido en una hoja de estilo, existe 3 formas diferentes:

•  Desde el atributo "style" de cada elemento: el estilo sólo afectará al elemento al que está asociado y tomará el diseño de la hoja de estilo marcada por defecto en el atributo "content" del elemento "meta". Casi todos los elementos pertenecientes al cuerpo (body) del documento pueden llevar este atributo. Por ejemplo, para señalar el tamaño de letra y el color del texto de un párrafo, escribiríamos: <P style=font-size: 14 pt; color: blue">Esta es una web sobre hipertexto. 

•  Desde la cabecera del documento al que se apliquen las normas de estilo: se incluye el elemento "style" dentro del elemento "head". Por ejemplo, <STYLE type="text/css" [aquí se incluyen todas las normas de estilo que afectarán al documento]</STYLE> 

•  Desde un documento aparte al que se hace referencia desde el elemento de la cabecera "link" y su atributo de relación "rel="stylesheet". Quedaría de la siguiente manera: <LINK rel=stylesheet">. Esta opción es la más adecuada si se van a utilizar las mismas normas de estilo en varios documentos, puesto que nos evitamos repetir esa información y además, permite dar una uniformidad y coherencia al diseño. Además, un cambio en la hoja de estilo afectará a todos los documentos que la referencien, y así evitaremos tener que modificar los documentos uno a uno. 

Pero no sólo los autores pueden crear hojas de estilo, también los usuarios pueden, en parte, elegir cómo se va a presentar la información mediante la utilización de una hoja de estilo predeterminada o seleccionada en el navegador.

Así pues, la tendencia actual es separar la función más puramente hipertextual del lenguaje HTML, mientras se crean lenguajes específicos para el diseño de las páginas web. Por eso las nuevas funcionalidades que ofrecen las hojas de estilo, se suelen englobar dentro de lo que se ha denominado HTML dinámico o DHTML, que se estudia en esta tesis en un capítulo aparte.

Hojas de estilo en XML

En cuando a la utilización de las hojas de estilo en relación al lenguaje XML, la aparición del lenguaje de Hojas de Estilo Extensible o Extensible Stylesheet Language (XSL) (http://www.w3.org/TR/xsl/) ha creado cierta confusión, ya que es posible utilizar este lenguaje para dar estilo, además de poder seguir utilizando las CSS u hojas de estilo en cascada con documentos XML.

La siguiente tabla, elaborada por el W3C, pretende aclarar un poco las cosas: (Fuente: BOS, Bert. Why two Style Sheet languages?   http://www.w3.org/Style/)

La única característica es que las Hojas de Estilo en Cascada o CSS pueden usarse para aportar estilo tanto a documentos HTML, como a documentos XML. En otro orden de cosas está el que el lenguaje XSL, incluido dentro de la familia del lenguaje XML y que usa su sintaxis, es también un lenguaje de transformación de documentos. Por ejemplo, XSL puede usarse para transformar datos XML en documentos HTML/CSS en el servidor Web. De esta forma, los dos lenguajes se complementan el uno al otro y pueden usarse juntos. Ambos lenguajes, CSS y XSL pueden usarse para dar estilo a los documentos XML.

En XML, la sintaxis para añadir una hoja de estilo externa sería la siguiente instrucción:

<?xml-stylesheet href="my-style.css" type="text/css"?>
... rest of document here...

Esta es otra alternativa de estilo, en un archivo llamado "modern.css":

/* modern.css */
ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

He aquí otra Hoja de estilo denominada "classic.css":

/* classic.css */
ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

El documento XML con estas tres hojas de estilo enlazadas aparecería como sigue:

<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="Modern" media="screen"
  type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes"
  title="Classic" media="screen, print" type="text/css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

He aquí otro ejemplo donde la hoja de estilo está embebida dentro del documento XML:

<?xml-stylesheet href="#style" type="text/css"?>
<ARTICLE>
  <EXTRAS id="style">
    INSTRUMENT { display: inline }
    ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    EXTRAS { display: none }
  </EXTRAS>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  ...
</ARTICLE>

Como ya hemos afirmado, un archivo CSS se puede crear y editar a mano, por ejemplo, con un editor de textos, pero también se puede escribir un programa en ECMAScript, Java u otro lenguaje que manipule hojas de estilo. De hecho es muy común que existan bibliotecas de softwares con estas funciones disponibles. Para ayudar a importar tales programas y bibliotecas de diferentes plataformas, W3C ha desarrollado la especificación CSS-DOM (http://www.w3.org/TR/DOM-Level-2-Style/), que define un conjunto de funciones que todas las bibliotecas deben proveer.

El Modelo Objeto de Documento CSS (CSS Document Object Model) es un API (Abstract Programming Interface) para manipular CSS (y para una extensión también a otros lenguajes de estilo). Un API es la especificación de una biblioteca de software, en cierta forma algo así como un manual que describe las funciones y los parámetros, pero que no contiene el código. Las APIs DOM y SAX cuentan ambas con especificaciones para sus propias CSS u hojas de estilo.

El CSS-DOM es una Recomendación del W3C (Document Object Model Level 2 Style Sheets and Cascading Style Sheets (CSS): http://www.w3.org/TR/DOM-Level-2-Style/. Hay varias bibliotecas CSS-DOM disponibles para diferentes plataformas. Muchas de ellas son libres. Muchos navegadores incluyen una biblioteca para uso con programas ECMAScript.

Por su parte, SAC (Simple API for CSS) es una interfaz estándar para parser CSS y soporta trabajar con CSS1, CSS2, CSS3 (currently under development) y otros lenguajes derivados CSS. SAC es un complemento para el CSS-DOM y está recogido por el W3C en: http://www.w3.org/Style/CSS/SAC/. El CSS-DOM contiene funciones para manipular una hoja de estilo después de que haya sido cargada en memoria; las funciones definidas por SAC ayudan en el análisis o parsing de una hoja de estilo, por ejemplo en transferir una hoja de estilo a un archivo en memoria.

Bibliografía:

W3C. Especificación CSS2. http://www.w3.org/TR/1998/REC-CSS2-19980512.

W3C. Extensible Stylesheet Language (XSL). http://www.w3.org/TR/xsl/

W3C. How to add style to XML? http://www.w3.org/Style/styling-XML

W3C. The Extensible Stylesheet Language Family (XSL). http://www.w3.org/Style/XSL/

W3C. SAC. The Simple API for CSS. http://www.w3.org/Style/CSS/SAC/