Introduction - what is a cascading style sheet
Before looking at advanced techniques for website design using CSS it is important to ask the question what is a cascading style sheet? This is needed to understand why some of the techniques I will look at work. Most designers have a rough idea about what a stylesheet is but to use them properly you need to understand exactly what is meant by the term cascading stylesheet.
Cascading
A cascade is a waterfall; the word seems to indicate something coming down. It is a beautiful word.
In the case of a stylesheet cascading is used to indicate that one stylesheet affects others within a single document – because one document can contain many stylesheets.
In the case of CSS the cascading is exactly definable. We can exactly predict the way one stylesheet will affect another one – with mathematical precision.
Consider the following example:
p{
font-size:12px;
font-family: Arial;
color: red;
}
If this is included in stylesheet ‘A’ it will produce a default paragraph of Arial font 12 pixels red in colour. If I further include a second stylesheet ‘B’ with the following definition
p{
color: blue;
}
The default paragraph will now be Arial of 12 pixels high but blue in colour.
Therefore we can think of the total stylesheet as follows:
Screen output = Stylesheet A + Stylesheet B + Stylesheet N
You may ask why anyone should want to include more than one stylesheet in one document?
Well you may define one with generic styles for an entire site and a second set one for each area of a site.
Thus you would get two sheets generic_styles.css and local_styles.css.
You could also have generic styles and home styles for example.
Additionally a browser has a default style sheet and a user can also potentially set a stylesheet up for all pages – e.g. if that person had problems with reading small print.
The fact that browsers have default styles is very important because different browsers can obviously have different default styles.
The example below is for a DIV layer defined as follows:
<div id=”leftnav”>some content</div>
The stylesheet entry is as follows:
#leftnav p{
font-family:Tahoma;
}
In this case the default paragraph style will be adopted, so it will be 12 pixels, blue in colour but using font Tahoma.
The paragraph for the DIV layer inherits from the default p style but adds the font Tahoma. This brings us nicely onto the topic of inheritance.
|
