DevPapers - article Getting started with CSS

OK, so you've got HTML sorted, and have realised that a problem arises when you have a whole web site
design made, and then realise that maybe you want to change the background color... on all the pages.

You could go onto every page and change bgcolor="#blah" but of course theres an easier way,
and CSS (cascading style sheets) are the anwer.

So how do they work?
Ok, there are a few ways of using styles, but the most useful, with the least work, is to make an external
style sheet. Style sheets basically declare a set of rules, which you make the html follow.

Anyway, to link to an external style sheet, i.e. a text document with a .css extension, you use the <link> tag
strangely enough. The link tag syntax is as follows:

easy enough yes? the only bit you need to change is 'yourfile'.

Now then, you have the stylesheet linked to your page, and you want to see what it can do, yeah? OK, open up yourfile.css and type in the following:

body {
background-color : #DEECEF;
}

And then open your html file that you want the style sheet linked to, and insert

just after the <head> tag where yourfile is the name of your css document.
Then, make sure you dont have a background color already set in the html, and refresh.

Why Bother??
Now then, if you refresh your page (F5) you will see that your page has a light blue background. How is this more effective than html?
Well on one page, its not really, but if you paste the

code on all your pages (be there 5 or 500) they will all have the same background color, and although
that is more code than bgcolor="#blah" - if you want to CHANGE the background color on ALL the pages,
you only have to alter it in yourfile.css - this should make your life a lot easier, and you can now
concentrate more on the web designing aspects, and not repetitive coding!

This is my easiest tutorial yet, but I can't stress how useful this is. Look out for my other CSS tutorial on scrollbars.