Brought to you by Style Master

2. A very short introduction to style sheets

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.

Why do we need Style Sheets?

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?

What are Style Sheets?

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 do they Work?

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

Next we'll check that you have all of the tools you need to begin, then we'll commence creating our first style sheet.

 

The House of Style