Today I downloaded Internet Explorer 7.0 Beta 2 to see if they finally fixed some of the horrible problems with their implementation of CSS. 

 The style tags that were not working in IE 6.0 seem to be working now!  I am so glad that Microsoft has gotten back to getting their browser updated.   I hope that people upgrade as fast as possible when it finally comes out. 

However, I don’t know why anyone would still use IE 6.  There is too many holes in security, no RSS support, does not support tabs and is terrible at rendering CSS.  For now if you don’t upgrade to Internet Explorer 7.0 Beta 2, please use FireFox 1.5 for own safety and to experience web 2.0 to its fullest!

One of the problems with using CSS is when to use the ID or Class Selector. It may be obvious to people who use CSS everyday, however for the beginner, this can very confusing.

When creating a stylesheet when should one use ‘*’, ‘.’ or ‘#’? What exactly does it mean when when a style contains one of these characters?

I have compiled a quick set of tips that I hope will help developers get a better understanding of CSS.

The universal selector

The universal selector allows you to match any element to the style. Think of this like a wilcard. To create a universal selector, begin the style with a ‘*’.

For Example: to make all text in your document blue:

* {color:blue;}

Class and ID Selectors

There are two types of selectors for Styles: class selectors and ID selectors.
Remember these only work if you have marked up your HTML correctly.

Class Selectors
Class selectors in CSS must have the name of the class preceded by a period (.) and can be joined with a simple selector.

For Example:

p.warning {color:red;}
span.warning {font-style:italic;}

To make a generic class tag that can be use by any element, simply create a new css entry the begins with a period (.)

For Example:
.warning {font-style:italics;}

Multiple Classes
If you need to combine mutiple classes you can do so by seperating them with a space inside your class attribute of the tag.

For Example:
.warning {font-style:italics;} .urgent {font-weight:bold;}

The class tag could be class=”urgent warning” or class=”warning urgent”. This would then create a style that uses italics and is bold. The order of the words does not matter.
To create a different style when combining two tags, append the two togther with a period between the two.

For Example:
.warning.ugrent {background:silver;}

This will create a style that is bold, italic with a background of silver.
WARNING: IE 6 and lower has problems rendering multiple classes.
I have not tested IE 7.0 to see if this has been fixed (Along with several CSS 2.0 issues that I hope get fixed)

ID Selectors
ID Selectors are very similar to class selectors but there are some critical differences. ID Selectors are preceded by the Pound symbol (#)For Example:

#sidebar {margin-top:0px; margin-left:0px; margin-right:20px;margin-bottom:20px;}
What is the difference between a class and ID Selector?
The difference is that an ID selector can be used once and ONLY once in a document.

WARNING: The problem is that most browsers will ignore this rule and allow you use multiple elements using the same ID tag. However avoid this because problems will occur if you need to use Javascript or an AJAX feature on the element. You will not be able to use the getElementById() method to get the right element from the DOM.
NOTE: Class and ID Selectors are case-sensitive! Make sure you follow a standard when it comes to naming your CSS tags.
I hope this helps clarify some issues that I had in the past with using CSS.