So, we've seen that style sheets help separate content from appearance. The content of a page goes into an 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:
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.
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).
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.