CSS Tutorial - Basic Styles

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

You could go onto eevveerryy page and change bgcolor=’#blah’ but of course theres an easier way, and 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 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 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!