I was trying out a way to float 4 DIVs inside a parent DIV on a quick site design, and this topic came up to my mind. I even explained this to a group of attendees at the "India MAX 2004, Bangalore (India MAX 2005, Bangalore)":http://www.brajeshwar.com/archives/2004/03/macromedia-max-2004-india-chapter/. Many times in the past, I have tried to get this archived but somehow slipped my mind, so, here we go.

*Classes and IDs, which one to use, when and why*?

By now, it is rather a common thing, most (x)html/css layout designers know very well where to separate ID selectors from classes in CSS! This article should most aptly apply to newcomers.

The "W3C (W3C)":http://www.w3.org/ defines that attributes of the type ID cannot have the same value more than once in a document, which means that it is unique for that particular document. Nonthless, as of today, most browsers will not complain even if you violate the same. It may be noted that a CSS ID Selector usually contains a "#" followed by the ID value.

#myid {
	position: relative;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background: url(../images/pattern.gif) repeat-y;
}

or

div#myid {
	position: relative;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background: url(../images/pattern.gif) repeat-y;
}

Classes on the other hand can be used many times in a document. So, they are best used to define a common style which can be used on multiple elements on your document. They start with a . (dot) followed by the value.

.myClass {
	font: normal normal normal 86%/1.6em "Lucida Grande", "Lucida Sans Unicode";
	border-top: 1px solid #ebebeb;
	text-transform: lowercase;
	color: #666;
}

An element can have an ID selector and "mutiple classes (mutiple classes)":http://www.brajeshwar.com/archives/2004/08/multiple-class-in-css/ applied to it. Remember one important thing here, *ID selectors have higher precedence over class selectors*.

So, IDs are for specific unique elements in your particular document and classes to be applicable to multiple elements in a document.