Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Estilo con CSS

La idea de las hojas de estilo, aplicadas a las páginas web no puede ser más simple. Igual que con un programa de autoedición o procesador de texto, la hoja de estilo tiene definido el formato del texto, los encabezados, subtítulos, etc. y se puede detallar tanto como se quiera. Cualquier cambio que se haga en la hoja de estilo se aplicará globalmente en todas las páginas web basadas en aquella hoja de estilo.

El poder que tiene esta forma de definir el formato de las páginas es enorme. Veremos que es posible cambiar el aspecto de una web entera, con todas las páginas que tenga, con sólo modificar una sola hoja de estilo. Es decir, puede convertir la tarea de reformatear todo en coser y cantar. Aparte de la comodidad y poder que tiene usar este sistema de formato, las hojas de estilo son una herramienta bastante flexible que permite hacer coses imposibles de con el HTML por sí solo. Por ejemplo:
  1. Los enlaces en una página, con HTML son siempre del mismo color. Con una hoja de estilo podemos definir tantos tipos de enlace como deseemos. Por ejemplo, un estilo para una barra de menú, otro para la tabla lateral, otro para el pie de la página y otro para los enlaces dentro del cuerpo del texto.
  2. El efecto de cambio de color y estilo que se observa al pasar el ratón por encima de un enlace de texto en Internet Explorer se crea -muy fácilmente- con hojas de estilo.
  3. En HTML los enlaces aparecen siempre subrayados. Algo que se atraganta a muchos diseñadores. Y no se puede cambiar. Pero con una simple orden de la hoja de estilo, aparecerán sin subrayar.
  4. Las hojas de estilo permiten un control tipográfico muy completo, en comparación con el basto manejo de las fuentes que hace el html. Se puede definir con mucha más precisión y variedad el tamaño, el estilo, el interlineado, aplicar color o imagen de fondo...
  5. Se puede controlar con precisión la disposición de los elementos de la página y, si es preciso, se pueden fijar posiciones absolutas e invariables.
  6. Junto con el lenguaje de programación Javascript, las hojas de estilo permiten crear páginas dinámicas, sin que sean necesarios gráficos: elementos móviles, menús desplegables...

Qué son y cómo se usan.

Las hojas de estilo son un estándar para la web que se empezó a aplicar a partir de los navegadores en versión 3 y 4. Es necesario remarcar que Explorer es mucho más avanzado en este aspecto que Navigator, con soporte mucho más completo y fiable de las especificaciones de las hojas de estilo. Sin duda, versiones posteriores aún mejorarán más este soporte.

La misma página web, sin tocar nada de su contenido, con un aspecto totalmente diferente como resultado de cambiar la hoja de estilo que tiene asignada. Una muestra de las posibilidades de CSS.

Las hojas de estilo para páginas web html se denominan en inglés Cascading Style Sheets, y se conocen mejor por sus siglas (CSS). Son "en cascada", puesto que se puede definir el estilo a diferentes niveles, cada uno de los cuales se impone al anterior. La forma en que se define el estilo es semejante al lenguaje de HTML, en el sentido de que consta de una serie de códigos que se redactan en forma de texto simple y se incorporan a la página web o se enlazan en forma de un fichero separado, con la extensión .CSS.

Aplicar hojas de estilo a una web no es una decisión irreversible; se puede cambiar todo muy fácilmente; si ya tenemos mucho trabajo hecho, es conveniente aplicar estilos sin tener que retocar prácticamente nada de cada página.

No entraremos en este tema con mucho detalle; si decidís aprender más os aseguramos que vale la pena y que es fácil. En las páginas Consorcio de la WWW encontrareis una sección (CSS) donde encontraréis todo tipo de recursos relativos a las hojas de estilo: enlaces, tutoriales, ejemplos, programas... Expliquemos brevemente en qué consiste un estilo CSS. A cada elemento del html de la página (por ejemplo, texto normal, encabezados, enlace...) se le atribuyen unas propiedades referentes al tipo de texto, colores, tamaño, posición... Se pueden crear tantas variantes o clases como se deseen para cada elemento. Por ejemplo, pueden definirse varios tipos de texto: uno blanco sobre fondo negro y otro inverso, y otros a mayor tamaño y color diferente para subtítulos, citas...otro pequeño para pies de imagen, etc. La flexibilidad es total, como en cualquier programa de DTP.

Lo más atractivo de usar CSS es que, una vez definido el estilo, no debemos preocuparnos más de especificar tipo de letra, tamaño, color, alineación, o cualquier otro atributo. Sólo con marcar el texto e indicar el estilo que le corresponde se aplica todo automáticamente y sin fallos. Y para cambiar todo el documento, o un conjunto de ellos, no hará falta ir seleccionando partes del texto. Basta redefinir el estilo y listo. Un ahorro de trabajo monumental.

cambio global de estilo con css
También es posible definir diferentes variantes para los enlaces (cosa imposible con el html por si sólo). Por ejemplo, podemos crear un tipo de enlace que simule una barra de menú y en la misma página tener varios tipos de enlace diferentes, cada uno con sus propias características de tipo de letra, color de texto y de fondo, etc. En Internet Explorer 4 o 5, pero no con Netscape 4.x, se puede aprovechar un interesante efecto consistente en especificar dos estados para el texto de los enlaces: uno normal y otro para el momento en que el ratón pasa por encima (a: hover)

Cómo crear y aplicar CSS.

Los editores de páginas web más actuales incorporan fáciles sistemas visuales de creación y aplicación de hojas de estilo; se pueden asignar estilos genéricos, como texto de párrafo, texto de tablas, enlaces... o crear estilos nuevos especiales, con un nombre descriptivo para identificarlos.

Aplicar la hoja de estilo.

La aplicación del estilo es totalmente flexible. Puede hacerse de varios modos y a diferentes niveles. Desde toda una web a un carácter individual, según convenga; y cuanto más específico sea un estilo, se impondrá a los que afectan la página más globalmente. Puede aplicarse por medio de un enlace a un fichero externo (por ejemplo, estilo.css), con un estilo para una página completa, que se incluye dentro de la sección <head> del html, o con un estilo definido para una sección particular de la página. Para más flexibilidad, un formato aplicado directamente desde el html se impondrá a su vez a la definición del estilo.

Si hemos optado por enlazar nuestras páginas con una hoja de estilo externa, las ventajas que tendremos son enormes: formatearemos todas las páginas sin preocuparnos de elegir tipos de letra, tamaño, color... y con la tranquilidad de poder cambiar todo de golpe si no estamos satisfechos. Para variantes específicas del estilo, las clases, es necesario indicar a nivel de html amb qué clase corresponde al texto seleccionado; con un programa de edición visual es otra tarea simple.

Si tenemos diez, cien, un millar... de páginas web enlazadas a la hoja de estilo externa, todas estas páginas tendrán un aspecto consistente. Lo más notable es que si decidimos cambiar el aspecto de toda la web, por ejemplo, cambiar el tipo de letra base del texto, basta con cambiarla en la hoja de estilo. En apenas unos minutos de trabajo actualizamos completamente y sin fallos toda nuestra web, sin abrir ni una sola de las páginas. Esto se llama comodidad. Cualquier cambio posterior será igual de simple; sólo preparar una nueva hoja de estilo que substituya la vieja y todo queda listo en un instante.

A pesar de toda esta apología de las CSS, en esta versión de Vigital no las hemos utilizado, o lo hemos hecho mínimamente. Esto se debe a que hemos empleado un magnífico programa para diseñar la web (Fusion) que ofrece muchas posibilidades que hacen en cierto modo innecesario aplicar estilos con css. Comentamos algo más sobre Fusion en la página dedicada a los editores de html. En cambio, sí se han empleado a fondo en la versión original de esta web.

Programas para redactar hojas de estilo.

Para crear y aplicar hojas de estilo a las páginas Web, no deseamos, evidentemente, tener que liarnos con el código HTML o aprender las especificaciones de CSS. Queremos hacerlo de forma sencilla, como si trabáramos en un procesador de textos. Crear los estilos como los creamos y aplicamos en Word. FrontPage Express y Composer (al menos hasta la versión 5) NO permiten crear o aplicar visualmente hojas de estilo. Con estos editores deberíamos, pues, hacerlo a mano.

editor cssPor fortuna, existe una solución: emplear un programa de edición de CSS. Existen un buen número de ellos, algunos freeware, como Ystylist o Cascade (encontraréis las direcciones en la página Cheapware.); o muchos otros en la página de CSS del World Wide Web Consortium. Por otro lado, en los editores de páginas más avanzados (Fusion 5, Dreamweaver, Golive...) se incluye pleno soporte visual de CSS. Un editor de CSS, como el que mostramos a la izquierda, contiene una serie de ventanas en las que elegimos los elementos del html y les asignamos el estilo deseado, simplemente escogiendo de entre las opciones que presentan los cuadros de diálogo. Más sencillo imposible. Dos trucos por si queréis aprovechar algo de las hojas de estilo, sin dedicar mucho esfuerzo al tema.

1. Reciclar ficheros CSS

Para aprovechar trabajo ya hecho; si alguna página web os gusta en especial, y queréis aprovechar su hoja de estilo (en caso de que hayan utilizado, naturalmente), mirad el código fuente de la página web (en  Ver->Código Fuente. ) Fijaos en la parte superior de la página. Si está enlazada a una hoja de estilo externa, veréis algo como: <LINK REL= "STYLESHEET" HREF="nombre_hoja.css">

Buscad en vuestro disco (con la utilidad de búsqueda del explorador de Windows este fichero CSS y ya podréis usarlo.) Si el estilo está incluido dentro de la sección <head> es más sencillo; basta copiar todo el trozo entre <STYLE TYPE= "TEXT/CSS"> I </STYLE>para pegarlo en la página nuestra, o bien pegar el trozo copiado dentro del bloc de notas y guardar como hoja de estilo, con el nombre_que_queramos.css para después aplicarlo donde convenga.

Dedicar algo de tiempo a aprender las bases de las hojas de estilo en cascada tiene su compensación en forma de una gran facilidad para dar formato a nuestra web y una mayor finura en el diseño de las páginas. Vale la pena visitar el ya comentado recurso de w3.org y leer alguno de los muchos recursos a los que proporcionan enlaces. En las páginas de tipografía de Microsoft hay una curiosa galería en la que muestran las posibilidades de CSS, además de material instructivo.