Cascading Style Sheets (CSS)
Cascading style sheets are a very powerful tool in the web designer’s armoury. They enable the appearance of a web site to be controlled from one master file (or set of files), and can enable the appearance to be radically altered by changing the style sheet rather than touching any of the HTML. One extreme example of this is the CSS Zen Garden where designers are invited to submit new style sheets for the web site, and visitors to the site can explore lots of different style sheets loaded for the same site. What makes this a powerful illustration is that the designs look totally different, yet they all use the same HTML. As an illustration of how this works, the <p> tag in HTML marks the start of a new paragraph. Before the arrival of CSS, if I wanted to specify the font, size and colour for all text in paragraphs, each one would have gone:
<p> <font face="helvetica" font-size="15" color="red">
Using style sheets I might instead add this to the style file:
p{
font-family: "helvetica";
font-size:15px;
color:red;
}
Which means that all paragraphs marked up with <p> appear in that style. This has the twin advantages of making the HTML easier to read, and meaning that, if I wanted to change an aspect of that, I simply need to alter where it is define in the style sheet.
If style sheets are well-used, the end result is what designers refer to as a “separation of form and content”, so that the major aspects of design live in a different place from the actual writing of content. In the early stages of designing a web site this means lots of effort goes into setting up the files, with relatively little content, but having got the form right, adding content is relatively quick. This also means that if basic parts of the design need to change as a result of things that come into focus as content is added, this is relatively easy to do consistently across the whole site. If, for example, I decided to change the colour of the border on all pages on this site, I’d just need to alter one number in the style sheet, which is a great deal easier than having to change each page.