Easy CSS from scratch - tried CSS before and cant get to grips with it? Here is the low down.

CSS is actually very simple to use, so long as you know when to use CSS and when not to use CSS, when to use an external CSS file and when to use inline CSS and forget about putting a CSS style statement in the page header!

When you code a site using pure CSS then the HTML content takes on a different role. No longer is HTML in charge of layouts, colours, fonts and sizing. HTML becomes just a simple collection of text, images and links wrapped in containers called divisions (divs). Most people however (myself included) do not do this. Why? Because different browsers (at the moment) treat the div container differently so your page becomes different in different browsers. What is the solution? I am not going to say 'drop divs' they are too useful, merely that you should use tables for page layout and divs as pure containers to group text, links and images.

What confuses many people is the exact order of the cascade, and what overides what. Many CSS beginners have had the experience of changing the off-page stylesheet and having no change at all occur on the pages! After tearing their hair out for a few hours they usually decide all this CSS stuff is for the birds and leave it alone!

You should get into the habit of only having two types of CSS in your documents, an external stylesheet and inline CSS. Its ok to develop a page using a CSS block in the header section of the html, please make sure though that the page is not calling up some old external stylesheet as well! As soon as you are reasonably happy with the CSS code put all the CSS that was in your header into an external file, save it, and then delete it from your html!

Now for the rules about when to use inline CSS. If you have a single exception, ie somewhere on the page you must have that short piece of text that is red italic and flashing, then use inline css as part of a span statement, paragraph tag, table cell, or image tag. If you need the same CSS code in more than one place (or on more than one page) then the external stylesheet is the place for it. Simple.

By doing these things you have now simplified your cascade enormously. Now the external stylesheet will define everything EXCEPT those things you have specified inline. An inline statement will always overide any external stylesheet definition, but only in the single object that it is called up in.

At this point I really wish Bukisa had a code editor but you cannot write code on here - the system does not allow it. This makes it difficult for me to write examples but you will find plenty in the CSS section of my website - http://www.webmaster-a.com - so I must continue to talk about CSS coding in general terms. Please dont get bored there is more good stuff coming!

I usually develop and debug my CSS using a style /style tag pair in the page header with what would be the contents of my external stylesheet between the tags. Debug? Yes. There is an old myth that you cant debug CSS. This is because all that happens when there is an error is that the browser silently drops the CSS definition and renders the object however the browser would render it anyhow, or sometimes not at all! If you have multiple statements for the same object (ie its red on a green background sized 45px high and in a serif font - thats 4 statements) it can be difficult to find the one causing all the problems. The answer, as with so many things is use FireFox! This friendly browser comes with a handy error console tucked away in the tools menu. Open this up, clear the contents and reload your page. It will tell you about all the nasty CSS gremlins and Javascript errors! 20% of the web surfs with firefox and this is just one tiny reason why.

An external CSS file is an external file that just contains CSS statements. It does not require style tags to wrap them in, but if you do have them in there (because you cut and pasted it from your page header) then this does not matter - they will be ignored. You can call the file what you like - dynaploppy7000.poo - for example but there is an unwritten convention you should make the extension .css so you know which file is which in the directory listing!

To use an external stylesheet file you have to drop the web browser a subtle hint. This is done by the link tag.
link rel=stylesheet type=text/css rel="nofollow" class="exlnk" href=dynaploppy7000.poo this should be wrapped of course in greater than and less than signs but this system will rap my knuckles if I do that here!

Some people like to have more than one stylesheet. They may have for example text.css images.css links.css and layout.css Thats fine, just have more than one link however if something is duplicated in two of the files then the most recently loaded file (the last link) will determine how that object is rendered.

If despite all this simplification you still cant get CSS to work on an object dont panic. If no errors are being reported it is highly likely that somewhere there is a rule overwriting the one you are editing! To get around this there is a 'kludge' (programmer speak for a temporary inelegant solution) that you can use. If you put the special keyword !important including the exclamation mark just before the terminating semicolon or final brace. e.g
P{ background: pink !important; indent 5} or a { display:inline-block !important} then this rule will be given priority over ALL others. So if it still refuses to work when given the important flag then its a coding issue. You should (even if this fixes the problem) still find the offending duplication and remove it then go back and delete the !important flag.

Now a word on the final piece of confusion that afflicts the beginning CSS coder - classes and id's

Many people do not know when to use what. I have seen pages with literally hundreds of id's in the CSS when nearly all the id's have the same layout rules. This way madness (and huge CSS Stylesheets!) lies.

The rules to use are quite simple. If you have a lot of different things on the same page that use the same styles they should be a class. Even if they are different object types they can be of the same class! Lets say for some reason you often use green bold text. You use it as paragraphs, locally in span statements and also in some headings or links. Define a single class called (say) bgreen and make all thes objects of class bgreen. Remember that if a rule does not apply to an object it will simply be ignored - so you could for example define the hover, and visited representation of all bold green links.

If you have a unique item on the page and there is only one of it, it shares few rules with any other object then give it an id. Remember an object can have a class and an id - so you could have all bold green paragraphs  indented and in a sans-serif font except one which is unindented and in a serif font that is also 2 pixels smaller. Just give the odd one out an id and simply define the lack of indent, the font and its size. It will inherit the bold and green from its class!

Finally if you are going to modify an object on the page using javascript then it must have a unique id, getelementbyid simply will not work without one!

If you are serious about diving into CSS then head on over to http://www.webmaster-a.com/easy-css-tutorial.php