Introduction to Cascading Style Sheets (CSS)
 
Remember your first web page when you used those nasty 'H' tags to set your text (Times New Roman, of course) to a predefined size? And then you got all clever and started using 'FONT' tags to change the size and font name to something more aesthetically pleasing?

Well, guess what? In HTML 4.0 the 'FONT' tag has 'depreciated' and may even become obsolete in future browser versions. But don't panic. There is something new, something better, something reusable, and something so much more customisable. Welcome to the wonderful world of Cascading Style Sheets.


What is a style sheet and why should I use one?

Users of desktop publishing or word processing software will probably be familiar with style sheets. The concept is simple. Sets of attributes about a body of text (face, size, colour, etc) are collected together in a named collection called a 'style'. You can apply this 'style' to any area of text, and the text will take on the properties associated with the 'style'. For example, supposing you want all your headings to be bold and red, you could set a style and then apply that style to each heading, and then all your headings would be bold red. But supposing you've just changed your document's background colour, and discovered that now your bold red headings don't stand out as much as you would like. Instead of going through your whole document changing each heading to a different colour, all you would have to do is change the colour in the Style. And Hey Presto! After one change all your headings now appear in your new colour.

Let's illustrate that.


Figure 1.1 - Including style sheet information in your HTML page



Figure 1.2 - The result of the code from Fig. 1.1 in a CSS enabled browser


Fairly straightforward, huh? It's all about associating a style with a tag and then any section 'using' that tag inherits the style. But Oh No! Horror upon horror. We wanted blue headings and not red ones. No problem, watch...


Figure 1.3 - Changing color from red to blue



Figure 1.4 - Headings are now Blue


So by changing the colour once in the 'style' tag we have changed all the headings with the utmost ease.

This is called making your style's reusable. You can use the same style time and time again on the same page without retyping any of the information in your style. More on this later.


Let's take it apart (and name the bits)

In CSS, HTML tags are called Selectors. CSS supports around 50 'properties', which can be applied to each selector. As you have seen above, properties include items such as color, font-size, or font-weight. Each property has a value against it (such as Blue, 12pt or Bold). A declaration is the properties and values against a selector. The selector, with a declaration is called a rule. Confused? The table below explains that better.

Rule:   H1 { font-size: 12pt }
Selector:   H1
Declaration:   font-size: 12pt
Property:   font-size
Value:   12pt


Selectors can be grouped together to inherit the same declarations:

H1, H2, H3 { font-size: 12pt }


Declarations can also be grouped together with semicolons:

H1 { font-family: Arial ; font-size: 12pt }



Inheritance

This is where it gets clever. Elements can inherit styles from other elements. The BODY tag is the highest-level element in a document and other tags would inherit from it. So, for example:

BODY { color: red }
H1 { color: green }


With these rules all the text on a page would be red, except for text in the H1 element, which would be green. Consider the following fragment of HTML in Figure 2:


Figure 2 - Fragment of HTML


Using the rules defined above the 'Text with the body' would be red. However, the H1 selector overrides the red from the BODY selector and the text 'Heading Number 1 Interesting Stuff' would be in green, with the word 'Interesting' italicised. But if we added an additional rule to our style, so it now looked like this.

BODY { color: red }
H1 { color: green }
EM { color: blue }


Now the EM tag wouldn't inherit green from H1 but would be blue, as specified in it's own rule. So the word 'Interesting' would be italicised and blue.


Using your style sheets

There are 3 ways for specifying styles for your web pages. These are LINKing, using the 'STYLE' tag or using Inline style declarations.

Linking
Linking style sheets is the most 'reusable' way of using style sheets. There's that word 'reusable' again. Remember, the whole point is to save you time and typing, not to mention cutting down on repetition.

Firstly, we create a plain old text file with the lines as per Figure 3.1 and save it with the name 'style.css' in the same directory as your web page.


Figure 3.1 - The contents of 'style.css'


Then we need to create our web page and tell it where to find the style sheet we want to use. We do this using the 'LINK' tag.


Figure 3.2 - Create a web page to use our 'style.css'


Since we have stored out style sheet separately for the web page we can use the same style sheet on any page simply by adding the LINK tag, as used in Figure 3.2. This is a great way to ensure that your web pages have some consistency about them.

The 'Style' Tag
This is the method that we used in Figures 1.1 and 1.3 earlier in this tutorial. You simply include your rules in a STYLE tag of your web page within the HEAD section.

Inline Style Declarations
Although it is much tidier to use the STYLE tag in your HEAD section, it is also possible to include inline style declarations within your web pages.


Figure 3.3 - Using inline style declarations


You will see in Figure 3.3 we have used an inline declaration for the H1 tag.


Which version of CSS?

Just when you thought it was all simple and straightforward. There are, at the moment, two versions of CSS. Inventively called CSS1 and CSS2. Amazing, huh?! CSS1 was finalized in December 1996 and this what we have been dealing with in this tutorial. CSS2, which appeared in May 1998, simply builds on CSS1. Where as CSS1 has around 50 properties, CSS2, as well as having all the CSS1 properties, also includes an additional 70 or so properties. The main issue about the two different versions is their browser support. (Oh, what a surprise! Not.)


Which Browsers support CSS?

Not surprisingly for CSS to work you (and your web site visitors) need a CSS-enabled browser. The good news is that most of them are. The following browsers support CSS; Microsoft Internet Explorer version 4 and up, Netscape Navigator version 4 and above, and Opera version 3.5 and above. So it's a pretty safe bet that the vast majority of your visitors will indeed benefit from style sheets.

Of course, not all browsers are born equal and consequently some deal better with CSS than others. As you start experimenting with CSS you will find that each browser has a few quirks in how it deals with CSS. Internet Explorer and Opera seem to handle things better than Netscape overall. The current Netscape implementation of CSS fails to understand some of the more useful properties, but you should have no problems with the straight forwards CSS1 functions.


Other Resources

Of course, to make style sheet editing much easier there are lots of editors out there which will do clever things like show you which properties work with which browsers, etc. The one I use is called TopStyle by Bradsoft and an evaluation version is available on their website at http://www.bradsoft.com.

For the full specification and list of properties of each version of CSS check out the links below:

http://www.w3.org/TR/REC-CSS1
http://www.w3.org/TR/REC-CSS2