More Web Design Tutorials

Using CSS – a Cascading Style Sheet – to Style Your Website

March 6, 2011

If I haven’t made it clear in the earlier HTML tutorials, I’m making it clear now: A well-designed website is styled with an external Cascading Style Sheet. Even as a child, "because I say so" was never good enough for me, and I don’t expect it to be good enough for you. Your website consists of multiple pages, and we’re linking all of them to the SAME stylesheet. That stylesheet adds font types, colors, positioning, background images, etc. to the entire site.

For example, if you want the background color on your site to be green, you would add this to your stylesheet:

body {background-color: #006600;}

And by tying this stylesheet with above information to every page of your site, every page will now have a green background. That means you define it ONE TIME and don’t have to worry about it again. It also means that, let’s say you’ve just finished all 159 pages of your website, and you just decided that maybe the green background isn’t right after all – blue would be much better – you now don’t have to open all 159 pages and change your background color. NO – it is so much easier than that. You only open your stylesheet and change the above to this:

body {background-color: #0088FF;}0

Then all you have to do is save this .css document, upload it, and TA-DAAAA – your entire site’s background is now blue. Just like that!