• The template page.
• The HTML code.
• The main CSS file.
• The printer friendly CSS file.

"So what exactly is a CSS file, and how do I use it?" you might wonder. CSS stands for Cascading Style Sheets, and it's the cascading that is the key. So why is it so important?

A short answer is that depending on the order your style sheets are called, or '@import'-ed (discussed later), the display will inherit properties from the previously called style sheets. This is called inheritance. Any style sheet called later can reset a previously set property (called overriding), unless the property is '!important' (also discussed later).

If you have done any programming, then you should be familiar with the concept of overriding. If not, or if you need a refresher, read on! When a CSS file is read, it is read from top to bottom, and properties are set in that order as well. If we have two CSS declarations for header, for instance, the first declaration will be applied, and then any other suceeding declarations will be applied later, and if there are any duplicate properties the later declaration will be the value set.

This actually applies to CSS files read in sequence as well. If a CSS file is read with one set of properties, and another is read afterwards which sets some of the properties to different values, each succeeding CSS file will set the properties to their values.

So, for a very simple example, let's consider the following:

Without knowing much about CSS, you should be able to infer the meaning of the above. We are declaring an element called 'content' with a border color of red in the first style sheet, and green in the second (hex values, RGB). Utilizing cascading, if we were to have the following in our HTML:

<link rel="stylesheet" type="text/css" href="first.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="second.css" media="all"></link>

what would the border color of the content element be? If you answered green, you are right! The reason is that 'content' is set to red initially, but then changed to green with the second style sheet. This is an example of overriding.

Let's expand our style sheets a little bit.

and now the linking for the style sheets:

Now, the first.css is always loaded because of its media type, but the second.css is only loaded when we are at a computer. What color is the border color for the 'content' element? Again, it is green due to overriding (it was red, but was changed to green with the second.css). Now, what color is the border color for the 'overall' element? It is not specified at all in the second.css, but first.css has a declaration for the border-color of 'overall'. It works like this: overall is set to a border-color of blue in the first.css, and not changed or even in second.css. So, does this mean that it disappears? No! The blue remains the color of the border even though it is not mentioned in second.css. This is inheritance.

So, what is the cascading in Cascading Style Sheets? It is the specification of properties for elements in one CSS file, and then being updated or inherited in subsequent CSS files, which may be used based on media type. What does this mean for you? It means that if you specify a CSS file with media type of 'all', your page will always have a base set of properties for the elements it contains. If you then have a CSS file with a media of 'print' you can update properties for when you print, and if you have a CSS file with a media of 'screen', you can have properties for when it is viewed on a computer. This allows for a lot of flexibility in your layout.

So, now that you know a little bit about CSS, I would suggest taking a look at the sample css file provided for you. A few good webpages to get your started are located at W3 Schools and Zvon. Also, what I have found to be quite useful is the "Cascading Style Sheets" book (a.k.a. The Trout Book) published by O'Rielly which is available at most major book stores. Once you've become a little more familiar, be sure to check out our Advanced Cascading Section.