How do style sheets work?
Think of a style sheet as a set of instructions, suggesting to a web browser how to draw a page. Note I say "suggest" not "tell", because CSS does not force a browser to display a page in particular way, it merely suggests to the browser how the page should be displayed. This is an important distinction.
figure 1: using style sheets to separate content from appearance
The elements of a style sheet
Every Cascading Style Sheet (whether it is contained in a .css file, or embedded in the head element of an HTML document) is a series of instructions called Statements. A statement does two things:
- it identifies the elements in an HTML document that it affects
- it tells the browser how to draw these elements
By elements, I mean paragraphs, links, list items and so on. In technical HTML terms, an element is anything marked up inside HTML tags.
The part of a statement which identifies page elements is called a Selector. Selectors select page elements.
The part of a statement which tells a browser how selected elements should be drawn is called the Declaration. A declaration can contain quite a number of Properties, the individual pieces of style to be applied to the selected element.
figure 2: the anatomy of a style sheet
Here is an example to let you see what I am talking about.
body
{
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 1em;
text-align:justify;
}
This is a single statement, perhaps one of many in a style sheet.
 figure 3: anatomy of a statement
The selector is body. This means that the statement will affect the <body> element of any page linked to this style sheet.
The statement has a declaration with three properties. That means that any element selected by this selector will have three of its properties affected. Each property has a name, for example "text-align" and a value, for example "justify". In this case, the font of the body text will be drawn in Verdana by the browser. If Verdana is not available, the browser will use Minion Web, or if this is not available, Helvetica. If none of the specified fonts are available, the browser will draw the body text in a default sans-serif font.
In addition to affecting the font of selected elements, this statement sets the font size to 1em. We'll look at the em unit and other possible units later. If you are familiar with HTML, you'll know that you can't set point sizes with HTML, simply one of 6 relative font sizes. This is another distinct advantage of style sheets - much more sophisticated page layout and typographical control.
Lastly, the browser is instructed to draw body text as fully justified.
|