> Manuales > Tutorial de CSS básico

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 fue 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ándares del HTML y otras. Estas "trampas"; han causado a menudo problemas en las páginas a la hora de su visualización en 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 dificil 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án 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.

Características y ventajas de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a:

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:

Y seguimos mostrando 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:

Navegadores que lo soportan

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, sino que 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.

Nota: Esta era la nota de compatibilidad escrita en 2001: hoy no es relevante, pues habla de navegadores muy antiguos. 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.

Este artículo espero que te deje con ganas de conocer más, así que no te detengas y continua aprendiendo cuál es la filosofía principal de CSS: la separación del contenido y la presentación.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual