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.
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.
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.
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 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 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 we are going to take a good hard look at Selectors, how they work, and how to use them.