Comme vous le savez déjà, SPIP traite séparément le contenu de sa mise en page et son habillage graphique : les squelettes trient et affichent les contenus souhaités en pages HTML, dont l’habillage graphique est réalisé par des feuilles de style CSS. Passez à la vitesse supérieure pour habiller vos squelettes : utilisez les feuilles de style avec SPIP !
Pourquoi les feuilles de style ?
Si vous réalisez des pages Web de manière « traditionnelle », les indications graphiques sont insérées directement dans le code HTML de votre page. Ainsi à chaque fois que vous voulez mettre un texte en rouge, vous écrivez <font color="red">. Pour afficher un tableau avec des bordures épaisses, vous écrivez <table border="2">.
Avec cette méthode et un site statique (où chaque article a une page HTML spécifique), changer la maquette de tout un site est un cauchemar : il faut rechercher dans tous les fichiers HTML, les portions de code à modifier, et effectuer ces modifications une par une (par exemple remplacer <font color="red"> par <b> si l’on décide que les éléments anciennement affichés en rouge seront désormais en gras).
Comme vous le savez déjà, SPIP améliore beaucoup la situation : vous n’avez plus à modifier des centaines de fichiers HTML, mais juste quelques squelettes ; et votre mise en page est remise à jour automatiquement sur l’ensemble du site.
Cependant le problème n’est pas entièrement résolu. Par exemple, mettons que vous ayez décidé d’employer un certain bleu pastel sur beaucoup d’éléments du site, afin de donner une identité graphique à votre site : les liens, les encarts, certains éléments de navigation... sont affichés en bleu pastel. Le jour où vous voudrez remplacer ce bleu pastel par un vert pâle, vous devrez modifier tous les endroits du squelette où ce bleu apparaissait pour le remplacer par le vert pâle. Cela peut être décourageant : il n’est pas aisé dans ces conditions de changer rapidement le rendu des pages, ne serait-ce que pour faire des essais.
La solution réside dans l’utilisation des « feuilles de style externes ». Une feuille de style est un fichier où vous définissez un ensemble de propriétés graphiques, et les endroits où elles s’appliquent. On note deux avantages capitaux des feuilles de style :
- la feuille de style est un fichier unique et centralisé, que vous pouvez appliquer à autant de fichiers HTML (et de squelettes SPIP) que vous le désirez ;
- les propriétés graphiques sont définies une seule fois dans la feuille de style, quel que soit le nombre d’endroits où ces propriétés sont appliquées dans le HTML.
Concrètement
Pour être appliquée à un fichier HTML (qui peut être un squelette SPIP), la feuille de style doit être déclarée dans l’entête de votre page (entre les balises <head>), de la façon suivante :
<link rel="stylesheet" type="text/css" href="mes_styles.css" />
- Ici le fichier mes_styles.css contient les propriétés graphiques que vous voulez appliquer à la page HTML (dans la suite de cette rubrique, on supposera que mes_styles.css est le nom que vous avez choisi pour ce fichier).
- Ce fichier porte l’extension « .css ». En effet, CSS est le nom du langage utilisé pour les feuilles de style, de la même manière que HTML est le nom du langage utilisé pour la réalisation de pages web. Notez bien que le CSS n’est pas propre à SPIP, il s’agit d’un standard du Web [1].
Note : une feuille de style peut s’appliquer aussi bien à une page HTML classique (« statique ») qu’à un squelette SPIP (« dynamique »). Cela veut dire que toute astuce CSS valable dans du HTML classique sera aussi utilisable dans un squelette de votre site.
Si vous avez bien lu les paragraphes précédents, vous serez peut-être dubitatifs : oui, il faut apprendre un nouveau langage pour utiliser les feuilles de styles (SPIP n’y est pour rien !). Les CSS n’utilisent pas, en effet, la syntaxe du HTML. Cependant ce langage est très simple, et il suffit de quelques exemples pour mettre le pied à l’étrier. De très nombreuses documentations existent sur ce sujet par ailleurs.