bravemouse

Here and there in these notes you may have come across the statement that "this could be done better using CSS".  So what is CSS, and why should you learn to use it?

CSS stands for "Cascading Style Sheets".  It was developed because of  the inadequacy of using HTML for controlling the look of web pages.  HTML is limited and inefficient at page layout and formatting text.  Apart from the fact that HTML gives you very limited control, it is a very inefficient way of controlling the appearance of large web sites.
You (should by now) know how to specify the background colour of a page using HTML.  Now imagine that you have a web site with several hundred pages.  Changing the background colour of every page on that site would take some time, no?  You would have to open each page in an HTML editor and change the relevant tag. If you used a CSS instead, you would have to make only one change to the style rule in the CSS document, and the background colour of every page in the entire site would change.

CSS  makes it possible to separate the "presentation details" – the colours, fonts, and also the layout of a site.  HTML tags are used to divide the information into sections, and CSS applies "style rules" to the sections.

It is very easy to use CSS for things like changing the background colour of a site, or specifying the font used.  You will find that you have much finer control – for example, with CSS you can specify line height and letter spacing, which is not possible with HTML.  Once you are a bit more confident, you can also use it to control the layout of the page – no more HTML tables!

You can see CSS in action at the CSS zen garden .  The content of the Zen Garden is kept in a HTML document, just as usual.  But the presentation – the layout, the pictures used in the title, the background, the colours, the fonts and so on are all specified in an CSS document.  Many people have written their own CSS for the Zen Garden to demonstrate how simply changing the CSS completely changes the look of the site.  Have a look.  Click on the "select a design" links on the right to try out some of the CSS version.

Tags: No Comments