If you know what style sheets are, then you can jump
straight into the fray.
If you'd like to know a little more about what they are, then that's
what we'll cover in this part.
Think about how inefficient it is to mark up every piece of HTML (every HTML
Element) with a description of what it should look like. You want every heading
of your site to be in a certain font (say Helvetica), and the text of your pages
to be another, say Verdana.
To do this, each heading is marked up to have the desired font. And
each paragraph or other element is too.
This takes time, and makes your pages bigger (think of hundreds of Font
Face="Arial"
tags, they take up space.). And don't try to think about
what is going to happen when Arial is outre, and we need Minion Web as our heading
font. How many find and replace operations is that going to take, on how many
files?
So now you know why we need style sheets. But what are they?
Think of a style sheet as a set of instructions that tells a
browser how to draw a particular type of HTML element. That's all it
is really.
Each of these instructions, or rules has two parts. Firstly,
a selector tells a browser which elements in a page are
governed by the particular rule. Rules also have a set of
properties, which tell a browser how to draw any elements
that are selected by the rule.
Throughout these lessons, we'll be investigating a number of the different types of selector that you can use in style sheets, and various properties that can be applied to elements on a page.
These rules are contained in a Cascading Style Sheet. This is nothing more than a simple text file, with the suffix .css to the name. Something like, core_style.css.
Each of the rules, which we will learn much more about shortly, has a very
simple form. The selector, followed by the set of properties, which are surrounded
by curly braces (that is {
and }
).
For instance P {font-size: 12px}
selects any paragraph, and applies
a font size of 12 pixels to it.
So how does a browser know that there is a style sheet for a page
when it loads it? Well, either there is a link to the style sheet, or
the style sheet is in fact embedded in the head of the HTML
document.
We will learn how to do that in the lesson, Styling
your Site.
When the browser loads the page, it notices the link, or the embedded style sheet, and uses this to style your page.
Next we'll check that you have all of the tools you need to begin, then we'll commence creating our first style sheet.