Cascading Style Sheets (CSS)

Cascading Style Sheets

In my article on Basic Web-Page Design Tips I advised you to learn about Cascading Style Sheets (CSS).
I'll re-cap some of the reasons for learning CSS.

It reduces your html page size (sometimes by 20% or more) - so thats less HTML to write.
Your pages being smaller in content, they now take less time to download for visitors to view.
CSS gives you much greater 'control' over your page style.
CSS gives you 'pixel precision' over the position of your elements.
Once you have written the CSS for ONE PAGE, then every page you add to your site after that - link it to the same stylesheet - and its all done.
Once the style applies to all your pages - you only have to change one small bit in your stylesheet (lets say a text colour - or the paragraph font) - and it changes all the paragraphs or all the colours on every page.

So What Exactly is CSS

In its simplest form - CSS is merely all your HTML style written separately.
Its not a fancy new computer language !!

If you can write all the style commands for HTML - then you can write virtually the same commands for CSS.
Remember - Life started with plain HTML - It then evolved into (a) HTML 'Transitional' (leaving your style on the page); and (b) HTML 'Strict' (taking your style out of the page - and calling your style CSS)

Here is a small simple example of how its done.

NON CSS and HTML 'Transitional Version of a paragraph:-

<p><font size="3" face="Comic Sans MS" color= "#FF6600"><b><i>This is written in red Comic Sans MS 12pt bold italic fontsize 3.</i></b></font></p>

produces:- This is written in red Comic Sans MS 12pt bold italic fontsize 3.

All CSS does is take the Style out of the html sheet and put it elsewhere.

So the style commands would be:-

     {font-family : "Comic Sans MS";
       font-weight : bold;
       font-style : italic;
       font-size : 12pt;
       color : #FF6600;
       background-color : transparent;}

Points to note:-
The whole 'set of commands' are enclosed in {} squiggly brackets.
Each 'descriptor' is separated from its 'value' by a : colon.
Each value is finished with a ; semicolon.

So having described the style class we now need to give it a name.
Anything will do but I'll call it '.comired' - note the dot in front.
You now need to add that bit to the front of your style description.

So it looks like:-

.comired {font-family : "Comic Sans MS";
                font-weight : bold;
                font-style : italic;
                font-size : 12pt;
                color : #FF6600;
                background-color : transparent;}

You now need to place this CSS code in one of 2 places.
Either in the head of your html document if its only going to apply to that html document.
Or in a separate Style sheet if its going to apply to more than one document.

For now we will place it in the documents head, and any style commands in the html page head must be enclosed in the following code:-

This would mean that the final code looked like this:-

<html>
<head>
<title>My web page with CSS</title>
<style type="text/css">

</style>
<body>
<p class="comired">This is written in red Comic Sans MS 12pt bold italic font.</p>
</body>
</html>

It really is as easy as that.

Now at first glance you might rightly say that I've typed as much in the head as I did in the body - and thats true.
BUT - having defined the class ".comired" once - I never need to do it again. So every red Comic Sans MS paragraph I write after that, I only need to write <p class="comired"> and its done.

Now, if you define all the other main style for your elements up in the head then it becomes even easier still.

You can define all the elements like 'body', 'p', h1,h2,h3, ol & ul (lists), etc, etc.
All the stuff you normally have to write each time to change from your computers default display settings can be re-set as your default in your page header.

Even better still - If you have 20 pages on your site - and your general style is consistent throughout the site then you would put all your style in an external stylesheet and link to it from each of your html pages.
This sets the default styles for your whole site.

To create an EXTERNAL Stylesheet:-
You need to transfer all the style that is in your 'page head section' onto a blank sheet (no html, head, title or anything else) and also remove the 'style' enclosing commands from round it.

So on a blank bit of paper you would put:-

.comired {font-family : "Comic Sans MS";
                font-weight : bold;
                font-style : italic;
                font-size : 12pt;
                color : #FF6600;
                background-color : transparent;}

Yes its the same as you did very early on !!

Now all you do is name the sheet and save it as a ".css" file instead of a .html file - maybe call it "style1.css".

And Finally - instead of the 'enclosing' style commands in your HTML page header, you add in the command that tells the computer that when it loads your html page - it also has to load the info from "style1.css as well.
This command goes in the html page head and reads:-

<link rel="STYLESHEET" type="text/css" href="style1.css">

So your FINAL page with the external Stylesheet link would look like this:-

<html>
<head>
<title>My web page with CSS</title>
<link rel="STYLESHEET" type="text/css" href="style1.css">
<body>
<p class="comired">This is written in red Comic Sans MS 12pt bold italic font.</p>
</body>
</html>

SO - all the style is off the page and it really is much simpler to handle once set up !!

Now the final thing I hope will prove it really does save a lot of time once set up - is the actual creation of this page by me !!.
If you look at all the coloured boxes in this section, I have 4 classes in my own stylesheet called 'news1', 'news2', 'news3', & 'news4'. Each time I want a fancy coloured boxed paragraph I only have to type <p class="news1"> and its done (they were originally done for my NEWS page but I've used them all over the place since.

If you want to look at my own stylesheet and see what I've done myself then please feel free to do so.

I really do hope this has given you the confidence to have a go yourself.
There are a number of links below to CSS imformation and they are written by much cleverer people than myself.
So give it go and have fun !!!!

See - Adding a touch of Style - by Dave Ragget for the basic ideas.
Or look at A Comprehensive CSS Guide for another good explanation.
And finally go to CSS Zen Garden and see how you can produce pixel perfect pages without tables using CSS and DIVS.

If you are interested in GEORDIELAND then visit the site below.