PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Differents between Class and ID in CSS

Posted by PANVEGA on February 12, 2008

In this short post I gonna explain in easy words the main differents between a CSS Class and CSS ID.

Introduction:

CSS IDs are similar to classes in that they define a special case for an element. Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name. The end result looks something like “element#idname”. Also, be sure to absorb the fact that when an ID is used in HTML, we must use “id=name” instead of “class=name” to reference it!

  • ID = A person’s Identification (ID) is unique to one person.
  • Class = There are many people in a class.
  • Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.

The key thing to know is that IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed. Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.

In my opinion the most important difference is that ID can be called by Javascript’s getElementByID function.I had to use the function many times and it is always very helpful calling the ID.

document.getElementById(“Headline”).style.visibility = “visible”;

Applying many different classes in one element

e.g.

.font-family{
font-family:Algerian;
}

.font-size{
font-size:large;
}

.font-style{
font-style:oblique;
}

<span class=”font-family font-size font-style”>My Font with many classe</span>

ID’s have special browser functionality

Classes have no special abilities in the browser, but ID’s do have one very important trick up their sleeve. This is the “hash value” in the URL. If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of “comments” and will automatically scroll the page to show that element. It is important to note here that the browser will scroll whatever element it needs to in order to show that element, so if you did something special like a scrollable DIV area within your regular body, that div will be scrolled too.

CSS  CLASS

Class is specified by including a period (.) before the selector name. The syntax for declaring a Class selector is as follows:

.[Class Name] {
property:value;

}

.letterspacing{
letter-spacing:6px;
}

To apply this style to the HTML, using the following code:  <span class=”letterspacing”>Letterspacing</span>

We can also specify different instances of a class selector. This is achieved by using the following syntax:

[Type Selector].[Class Name] {
property:value;

}

For example, if we have the following CSS declaration:

p.intend{
text-indent:8px;
line-height:29px;
}

b.intend{
text-indent:8px;
line-height:29px;
}

This shows how <b class=”intend”>different instances</b> of a selector <p class=”intend”>can be specified</i>.

CSS  ID

ID is specified by including a number sign (#) before the selector name. The syntax for declaring an ID selector is as follows:

#[ID Name] {
property:value;

}

For example:

#footer {
color:#FF00FF;
}

To apply this style to the HTML, using the following code:

<p id=”footer”>This is a sample using an ID selector.</p>

Elements can have BOTH

There is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a very good idea. Take for example the default markup for a WordPress comment list item:

<li id="comment-27299" class="item">

It has a class applied to it that you may want for styling all comments on the page, but it also has a unique ID value (dynamically generated by WordPress, nicely enough). This ID value is useful for direct linking. Now I can link directly do a particular comment on a particular page easily.

Conclusion:

There is no hard rule on when to use ID and when to use Class. My suggestion is to use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript’s getElementByID function, in which case you need use ID.

Class and ID names are both case sensitive. For example, .classone and .ClassOne are two different classes.

Your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. As it turns out, I’ve probably been better off all along by sticking to my class over id mentality. However, it’s good to know that id has a specific purpose.

Regarding CSS, there is nothing you can do with an ID that you can’t do with a Class and vise versa.

More useful links:

Difference between DIV and SPAN in CSS

http://css-discuss.incutio.com/?page=MultipleIdClassBug

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: