cascading style sheets tutorial

How do Style Sheets Work?

So, we've seen that style sheets help separate content from appearance. The content of a page goes into a HTML file. And the appearance goes into a style sheet. But how does all this end up as web pages?

Think of a style sheet as a set of instructions, telling a web browser how to draw a page.

Every Cascading Style Sheet (contained in a .css file) is a series of instructions called Statements. A statement does two things:

  1. it identifies the elements in a page that it affects
  2. it tells the browser how to draw these elements

By elements, I means 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 that 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.

Here is an example to let you see what I am talking about.

BODY
{
font-family: verdana, "minion web", helvetica, sans-serif;

font-size: 10pt;
text-align:justify;
}

This is a single statement, perhaps one of many in a style sheet.

The selector is "BODY". This means that the statement will affect the body element of any page linked to this style sheet.

The declaration has three properties. That means that any element selected by this selector will have three of its properties affected. 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 is available, the browser will draw the body text in a default san-serif font.
In addition to affecting the font of selected elements, this statement sets the point size to 10pt. If you are familiar with HTML, you'll know that you can't set point sizes with HTML, simply one of 6 relative 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 (although this feature is not yet supported by the major browsers).

In this part

In this lesson, we took a look at what a style sheet really is. You can think of a style sheet as a specialized kind of computer program. A computer program is a set of instructions written in a specific language which tells a computer how to perform a particular task.
A style sheet is a set of instructions written in CSS1 (a language) that tells a browser how to draw web pages.

Now, before we continue, and take a closer look at each aspect, don't let the idea of learning a programming language, and of programming computers put you off. Just as you enjoy the challenge of working with HTML (either typing "raw code" or using an editing tool) you'll find working with style sheets enjoyable. And a tool like Style Master takes any tedium and frustration out of the job. (OK, we have to get a plug from our sponsors in here somewhere).

Next

Its time to roll up the sleeves as we start looking at the details of style sheets, and learn how to create and edit them. We'll begin by looking at the building blocks of style sheets, statements.