Como ya sabes, SPIP trata por separado el contenido de una página y su aspecto gráfico: los esqueletos ordenan y presentan los contenidos deseados mediante páginas HTML, cuyo aspecto gráfico se realiza por medio de hojas de estilo CSS. Pasa a una velocidad superior para vestir tus esqueletos: ¡utiliza las hojas de estilo con SPIP!
¿Por qué hojas de estilo?
Si realizas páginas Web de modo «tradicional», las instrucciones gráficas se insertan en el código HTML de la página. Así, cada vez que quieres poner un texto en rojo, escribes: <font color="red">. Para mostrar una tabla con borde ancho, escribes: <table border="2">.
Con este método y un sitio estático (donde cada artículo tiene una página HTML específica), cambiar la maquetación de un sitio completo es una pesadilla: hay que buscar en todos los archivos HTML las porciones de código por cambiar, y hacer esas modificaciones una por una (por ejemplo reemplazar <font color="red"> por <b> si se decide que los elementos que se mostraban en rojo, ahora van a ser mostrados en negrita).
Como ya sabrás, SPIP mejora mucho la situación: no tienes que modificar ya cientos de archivos HTML, sólo algunos esqueletos; y el aspecto de tu página es actualizado automáticamente en el sitio completo.
Sin embargo, el problema no está completamente resuelto. Por ejemplo, supongamos que has decidido usar cierto azul pastel en muchos elementos del sitio, para conseguir una identidad gráfica de la Web: los enlaces, los encartes, ciertos elementos de navegación... se ven en azul pastel. El día que quieras cambiar el azul pastel por un verde pálido, tendrás que modificar todos los lugares del esqueleto donde aparece el azul y sustituirlo por el verde. Esto puede ser desalentador: en estas condiciones no es factible cambiar rápidamente el aspecto de las páginas, ni siquiera para hacer pruebas.
La solución está en el uso de las «hojas de estilo externas». Una hoja de estilo es un archivo en el que se define un conjunto de propiedades gráficas y los lugares donde estas se aplican. Las hojas de estilo tienen dos ventajas principales:
- la hoja de estilo es un archivo único y centralizado, que se puede aplicar a tantos archivos HTML (y esqueletos SPIP) como se desee;
- las propiedades gráficas se definen una sola vez en la hoja de estilo, sea cual sea el número de veces que se aplican en el HTML.
Concretamente
La hoja de estilo que se va a aplicar en un archivo HTML (que puede ser un esqueleto SPIP), debe declararse en el encabezado de la página (dentro de la etiqueta <head> junto al título y otras etiquetas <meta>) de la siguiente manera:
<link rel="stylesheet" type="text/css" href="mis_estilos.css">
- Aquí el archivo mis_estilos.css contiene las propiedades gráficas que se desea aplicar a la página HTML (a lo largo de toda esta sección, supondremos que mis_estilos.css es el nombre que has elegido para este archivo).
- El archivo lleva la extensión «css». De hecho, CSS es el nombre del lenguaje utilizado en las hojas de estilo, de igual forma que HTML es el nombre del lenguaje utilizado para la creación de páginas Web. Nota: el CSS no pertenece a SPIP, se trata de un estándar de la Web [1].
Nota: una hoja de estilo se puede aplicar lo mismo a una página HTML clásica («estática») que a un esqueleto SPIP («dinámico»). Es decir, que todos los trucos CSS válidos en HTML clásico sirven también para un esqueleto de tu sitio.
Si has leido bien los párrafos anteriores, es posible que estés en duda: sí, hace falta aprender un nuevo lenguaje para usar las hojas de estilo (¡no es culpa de SPIP!). Las CSS, en efecto, no usan la sintaxis del HTML. Sin embargo, es un lenguaje muy sencillo, y bastan algunos ejemplos para poder manejarlo sin ayuda. Existe abundante documentación sobre el tema en otros sitios.