What are style sheets for?
If you make Web pages in the so-called traditional way you insert layout definitions in the HTML markup of your page. So every time you want to set the colour of some text to red you’ll write <font color="red">. To display a thick-bordered table, you’ll write <table border="2">.
By using this method, and having a static site, i.e. in which every article has a specific HTML page, changing the layout of the site is a nightmare. You have to search for every occurence of HTML markup which need editing, and then make the changes one after the other (for example, replace <font color="red"> with <b> if you’ve decided that previously red-coloured elements will now be displayed as bold.
As you already know SPIP is a great improvement on that situation as you no longer have to edit hundreds of HTML files but only a few templates, and your layout gets automatically updated in the entire site.
The problem, however, isn’t completely solved yet. Let’s say, for instance, you’ve decided to use a certain pastel blue colour for many elements on your site in order to give your site its graphic identity — links, insets, some navigation elements, etc. will be displayed in pastel blue. The day you want to replace that pastel blue with light green you’ll have to edit all the occurrences of that blue colour in the templates in order to set it to light green. This can be a daunting task, and changing the way pages are displayed can’t be done quickly, not even for tests.
The solution lies in the use of style sheets. A style sheet is a file in which you define a number of graphic properties, and the places where they apply. Two great advantages of style sheets can be noted:
- the style sheet is one and only one file which is centralized, and which you can apply to as many HTML files (and SPIP templates) as you like;
- graphic properties are defined only once in the style sheet whatever the number of occurrences of these properties in the HTML markup.
How to go about it
The style sheet must be declared, i.e. linked to an HTML file (a SPIP template for instance), using the <link> tag which goes inside the head section (<head></head>) of the file — alongside the title and other <meta> fields — as in the following:
<head>
...
<link rel="stylesheet" type="text/css" href="my_styles.css">
</head>
In this instance, the my_styles.css file contains the graphic definitions you want to apply to the HTML page — in the rest of this tutorial we’ll assume you chose my_styles.css as a name for that file whose extension is “css”. As a matter of fact, CSS or Cascading Style Sheets is the name of the language used for style sheets, just as HTML is used to make Web pages.
Note: a style sheet can be applied to a classic, i.e. “static”, HTML page as well as to a SPIP template. This means that any CSS trick which is valid in classic HTML can also be used in one of your site’s templates...
If you’ve read the previous paragraphs attentively you may be feeling rather doubtful about all this. Well, a new language must be learnt to use style sheets — SPIP bears no responsibility in this! Though CSS don’t follow the HTML syntax the language is very simple, and a few examples will get you up and running!