The Difference Between ID and Class

ID VS Class: Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page.

Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).

So the CSS might look something like:



#top {
background-color: #ccc;
padding: 1em

.intro {
color: red;
font-weight: bold;




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

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


ID’s are unique

• Each element can have only one ID
• Each page can have only one element with that ID
Standards specify that any given ID name can only be referenced once within a page or document. 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. We’ll go over more reasons for uniqueness as we go on.
From my experience, IDs are most commonly used correctly in CSS layouts. This makes sense because there are usually only one menu per page, one banner, and usually only one content pane.

Classes are NOT unique

• You can use the same class on multiple elements.
• You can use multiple classes on the same element.
Classes, like ID’s, can also be used to in JavaScript scripts, but unlike ID’s, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some don’t know the full extent to which they can use classes. Classes can not only be used more than once, but more than one can be used on an element


.left {float: left;}

.larger p { font-size: 125%;}


<div class="left larger">

<p>A tiny bit of content.</p>


The above piece of code is perfectly valid HTML, it demonstrates a div using two separate classes. This technique can reduce your CSS style sheet considerably when used effectively. It’s also worth noting that you can use both ID’s and classes on the same HTML element.

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, 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.
This is an important reason right here why having ID’s be absolutely unique is important. So your browser knows where to scroll!


Anil Giri is the guy who can develop UI/UX with html, css and javascript and also able to create attractive and catchy UI for print media as well as for web with latest pattern and for all the major browsers and devices. I also loves blogging on web design, development and blogging.

Leave a Reply

Your email address will not be published. Required fields are marked *