CSS - creating a cascading stylesheet

Layout - CSS - creating a stylesheet

Now using stylesheets is actually very easy. You can either link your web pages to an external stylesheet, or you can include the style sheet inside the <HEAD></HEAD> area of individual web pages inside STYLE tags. The advantage of using an external stylesheet is that you can apply it to all pages by simply linking to it (see below).

Web design software does not always make this clear unless you read the HELP pages in detail. Forget your web design software for a moment, because it is easier to understand stylesheets if you take a look under the surface.

An external style sheet can be as simple and powerful as this:

(Note: there is a semi-colon ";" after each line - without this the stylesheet will not work properly)

You copy the above in Notepad, Wordpad or other text or HTML editor, and save it as "mystyle.css". Put this stylesheet in the same directory as your HTML files. Note the ".css" extension is important. Then you link your web pages to this stylesheet by putting the following code in the HEAD area of your pages.

It is now easy to change the background image or color of your site by simply changing the variables in the stylesheet. You can also change how the text in your in your website looks. Anything in "P" tags on your web pages takes on the "P" attributes specified in the stylesheet. The above will make your pages display 12 pt navy Verdana text (and you give the option of Helvetica and sans-serif in case your visitor's computer does not support the first choice of font).

The next concept is also simple and very powerful - the use of the class attribute. It is best explained by adding another style to our stylesheet explained above.

Now what this allows you to do is make certain blocks of text red. In your web pages, instead of a simple "P" tag around your text, you would add class="redtext" to the "P" tag and the text inside the tags would be red.

You can have any number of classes and assign classes not only to P tags, but to any tag in your web page BODY. And by simply changing the stylesheet you can change the look of your whole site.

There third way of adding style to a HTML element is to assign it an "id". For example, assigning it to a <div> tag....

then in your stylesheet the # shows that the style is an id, e.g:

You can however only use that "id" once on a web page. If you try assigning the same "id" further down in a page it will be ignored. You use the "class" attribute instead if you want to give the same style to a number of similar elements.

Are you beginning to see the power of using style?

It is however important to realise that different browsers deal with stylesheets slightly differently, although these days the differences are very minor. This is covered in Browser Compatibility.

arrowdown Positioning with CSS

Creating a stylesheet

Layout - CSS - creating a stylesheet