CSS: Hojas de Estilo para la Web

Introducción

CSS, Cascading Style Sheets (Hojas de Estilo en Cascada), es un estándar del W3C que define como poder añadir estilos (fuentes, colores, espaciado ...) a las páginas web. Aunque ya veremos que es un estándar que ha dado mucho de sí y sirve para más cosas que para controlar el estilo, permitiendo controlar la visualización de una página web incluida la parte dinámica.

La combinación de CSS con Javascript (JS) ha llevado a las páginas web a ser mucho más dinámicas e interactivas y, aunque aún no se ha llegado al nivel de tecnologías como Flash, se avanza de forma rápida y con estándares que están siendo soportados cada vez mejor por los navegadores.

Hojas de Estilo

Como hemos comentado CSS son hojas de estilo que se aplican al código HTML. Como otras hojas de estilo lo que intentan es que en el formato original, HTML, no se tenga que preocupar el autor de detalles sobre la apariencia final del HTML, y se centre en crear los contenidos y es su organización. El como se visualicen finalmente dependerá de las hojas de estilo que se apliquen.

Con esta separación por ejemplo se puede lograr que unos mismos contenidos se visualicen de una forma en un ordenador y de otra en un dispositivo móvil con una pantalla más pequeña, y de otra forma por ejemplo para los lectores de personas invidentes. El diseño de la información se separar del diseño de la visualización.

Otros ejemplos de hojas de estilo son por ejemplos las XSL, XML Style Sheets, o en general, las tecnologías que permiten aplicar plantillas a una información para producir el documento final que será mostrado al usuario de dicha información.

Una de las claves de CSS es el concepto de "cascada". Si varios estilos son especificados para un elemento, se selecciona uno de ellos de forma determinista.

Usos reales de CSS

jQuery

Dentro de Liferay se utiliza la librería JS jQuery para lograr todo el dinamismo de las páginas. Esta librería se basa en CSS para identificar los componentes de una página HTML y poderlos cambiar, ocultar o capturar sus eventos. jQuery utiliza tanto el árbol DOM como CSS para localizar los componentes de las páginas HTML y poder interactuar con ellos.

jQuery separa muy bien el código JS del código HTML, como lo hace CSS con el contenido y la estructura y la visualización, de forma que para manejar los elementos de HTML de la página no hace falta intercalar código JS en ellos sino que utilizando el árbol DOM, localizamos estos elementos desde fuera del HTML en bloques de JS y los manejamos desde allí. Por ejemplo

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

Cuando el objeto "document" de JS, el árbol DOM de la página HTML, está disponible asociamos a todos los enlaces, todos los elementos "a" del árbol DOM, que cuando se haga "click" sobre ellos se muestre un diálogo de alerta. Destacar que esto se logra sin necesidad de modificar para nada los enlaces dentro del HTML.

Para seleccionar los elementos HTML sobre los que aplicar acciones jQuery utiliza CSS y XPath junto con añadidos suyos de forma que se tiene un potente lenguaje de localización de elementos según diferentes criterios. Este es el corazón de esta librería y de donde viene lo de "Query". So lógica de "queries" para localizar elementos es su parte más potente. Luego sobre el resultado de la petición se realizan acciones para modificar los elementos encontrados (añadir clases CSS, ocultarlos, añadir nuevos elementos ...).

Demos de jQuery

MediaWiki

Todas las aplicaciones web modernas ya están diseñadas con CSS por las facilidades que introduce a la hora de modificar la apariencia gráfica y MediaWiki es una de ellas. De forma sencilla se puede modificar totalmente la apariencia del estilo por defecto de MediaWiki y por ejemplo, convertirse en sitios como el de F-Spot o Mono. Para ello nada mejor que utilizar la extensión de Firefox Web Developer y su editor de CSS en tiempo real que nos permite ver los estilo CSS que se usan en una página y modificarlos y ver los resultados, pudiendo construir nuestro CSS de forma visual.

Tutoriales

• Jonas Astrup's CSS tutorial (visto en página de W3C CSS)