complete css guide

<< linking & embedding

Statements

By now we should know how a style sheet works, and we should have a bit of an idea of what it should look like. Now it's time to start looking at the nuts and bolts of the technology.

Before, in How do style sheets work? we saw that a style sheet is a series of statements. There are several types of statement.

• @rules
  • @import
  • @media
  • @page
• comments
• HTML comment tags
• rules

We'll take a quick look at each of these, but the really important one for us is rules, which we leave for last. If you're new to style sheets, you'll probably do well by skipping straight down to the section on rules, and leave the other types of statement for use as a reference once you have a deeper knowledge of style sheets.

@rules

You can think of an @rule as a kind of macro instruction that tells a browser something other than how to draw elements. There are a number of different types of @rules.

@import

In CSS 1 the only valid @rule was 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. We cover cascading in more detail in our section on Cascade and inheritance in the advanced section of the guide.

The @import rule has the following format.

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

Alternatively, you can use also 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.

CSS 2 introduced the concept of media, and allows conditional importing of style sheets based on the media that a page is being displayed in. For more on this media conditional importing, see the section on media.

@media

@media rules were introduced with CSS 2. They allow parts of a style sheet to only be used when certain media are being used to display the page. For example, you can create an @media rule that applies only when a page is being printed. @media rules are kind of like embedding another style sheet within a style sheet, as opposed to @import with media which is importing another style sheet. They are both, however ways of making certain statements only apply when a page is displayed using a particular medium.

@media rules have the form of the keyword @media, followed by a media name (or a comma separated list of media names) followed by the rules that are to be applied to this group of media, enclosed in curly brackets. For example, the following rule will only make the background color of the body white when the page is being printed.

We'll learn more about @media rules in a later section on different media.

@page

@page rules were introduced with CSS 2 to allow better control over the printing of pages. An @page rule has the form of the keyword @page, followed by a number of printing specific rules contained within curly brackets. An example @page rule would be

We will cover @page rules in much more detail in the section on printing.

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 multilined.

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 be surrounded by HTML comment tags ( <!-- and -->). HTML comment tags should not be placed in external style sheets. To comment external style sheets you must use the CSS comment form outlined directly above.

Rules

Rules or rule sets are what we are primarily concerned with, at least to begin with. Put simply a rule is a statement that tells a browser how to draw a particular element on a web page.

As we saw a little earlier, a rule has two parts, a selector and a declaration. We are going to look in detail at 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.

It's a tricky idea, because it is probably quite different to your experience with style sheets in for example 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> 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 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> element? If you guessed body you were right. Quite simply, it is the opening tag for that element, minus the < and the >.

In addition to selectors for HTML elements (which are called type selectors) there are many other important types of selector, which we will be covering in the next section.

Now, our plan was to create a rule that tells a browser to draw paragraphs in a certain font. We've created 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}

Note that we have separated the properties in the declaration by a semicolon. Putting the selector and the declaration together, we get the complete rule.

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

We've gone into quite a bit of detail about rules. That's because they will generally be the largest part of your CSS coding. Rules are the only type of statement you need to know about to do the vast majority of what most people want to do with style sheets. You'll see that the bulk of this guide is concerned with the major aspects of rules: selectors and properties.

<< linking & embedding