cascading style sheets tutorial

Getting down to business

Enough scene setting, time to start making style sheets work.

Last time, in How Do Style Sheets Work? we saw that a style sheet is a series of statements. There are several types of statement.

We'll take a quick look at each of these, but the really important one for us is Rules, which we leave for last.

@Rules

You can think of an @rule as a kind of macro instruction that tells a browser something other than how to draw elements. For our purposes (in CSS1 and CSSP) the only valid @rule is the @import rule. @import tells a browser to import a style sheet from elsewhere and use it in conjunction with the current style sheet. A style sheet with an @import rule is said to cascade from the imported style sheet. This is how the cascade that we saw in Cascading and Inheritance works.

The @import rule has the following format

@import url(http://www.westciv.com/styles/style1);

alternatively, you can use the form

@import "http://www.westciv.com/styles/style1";

The url can be either a local file (in that case you use a relative url) or an absolute url, as in this case.

Comments

Because human beings have to develop, edit and share style sheets, they can be commented. A comment has the form

/* This is a style sheet comment*/

Comments can be multi-lined.

HTML Comment Tags

Because older browsers don't support cascading style sheets, to ensure that these browsers don't display a style sheet embedded in them as text, style sheets can include HTML comment tags ( <!-- and -->). You needn't really worry about these.

Rules

Rules or Rule Sets are what we are concerned with. A Rule is a statement that tells a browser how to draw a particular element on a web page.
A rule has two parts, a Selector and a Declaration. We are going to look in detail as each of these, as understanding both is essential to working with style sheets.

A selector identifies, or selects the elements on a web page that are affected by the rule.
The declaration then tells a browser how to draw any element on a page that is selected by the selector.

Sounds a little complicated? Its a tricky idea, because it is probably quite different to your experience with style sheets in say a word processor.

Let's take a look at an example or two.

One of the most common elements on a web page is a paragraph. If you are versed in HTML, this is the <P></P> element. A very simple rule could tell a browser how to draw a paragraph.
Suppose we want all of the text in paragraphs to be in the font you are (hopefully) seeing now, verdana. In a style sheet, we want to create a rule which selects paragraphs, or to put it another way, we want to create a paragraph selector. Sounds complicated? Well, below is the paragraph selector

P

Any guesses for the selector to select the body of a document. If you guessed BODY (or body) you were right. Quite simply, it is the tag for that element, minus the < and >.

In addition to selectors for HTML elements (HTML Element Selectors) there are several other important types of selector, which we will be covering in the next s ection.

Now, our plan was to create a rule that tells a browser to draw paragraphs in a certain font. We've create the selector, but now we need to create a declaration that tells the browser how to draw the selected elements.

Declarations are inside curly braces - { and }, and contain one or more properties, separated by semicolons. In our example, the declaration would be

{font-family: verdana}

And if we were to get really ambitious, and want the text to be red, we would have a declaration like the following

{font-family: verdana; color: red}

Putting the selector and the declaration together, we get the complete statement

P {font-family: verdana; color: red}

In this part

In this lesson we took a look at the major building blocks of a style sheet, the different types of statement. We paid a bit of attention to the most important kind of statement, rules, and saw how a rule has a selector which identifies the elements on a page, and a declaration, a set of properties that tells a browser how to draw the selected elements.

If you feel that we raced through this a little, then you are right. We are going to focus a good deal more on both selectors, and properties, in coming lessons.

Next

Next we are going to take a good hard look at Selectors, how they work, and how to use them.