Difference between id and class in CSS and when to

Question

This question already has an answer here:

• What's the difference between an id and a class? 14 answers

<style>
    #main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>

<div id="main">
    Welcome
</div>

Here I gave an id to the div element and it's applying the relevant CSS for it.

OR

<style>
    .main{
        background: #000;
        border: 1px solid #AAAAAA;
        padding: 10px;
        color: #fff;
        width: 100px;
    }
</style>
<div class="main">
    Welcome
</div>

Now here I gave a class to the div and it's also doing the same job for me.

Then what is the exact difference between id and class and when should I use id and when should I use class. I am a newbie in CSS and Web design and a little confused while dealing with this.

Answer 1

For more info on this click here.

Example

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5. In CSS there is no "font-color", the style is color so the above should read:

Example

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

The text would be white.

Answer 2

ID's have the functionality to work as links to particular sections within a webpage. a keyword after # tag will take you to a particular section of the webpage. e.g "http://exampleurl.com#chapter5" in the address bar will take you there when you have a "section5" id wrapped around the chapter 5 section of the page.

Answer 3

id:

It will identify the unique element of your entire page. No other element should be declared with the same id. The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".

class:

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

Answer 4

A class can be used several times, while an ID can only be used once, so you should use classes for items that you know you're going to use a lot. An example would be if you wanted to give all the paragraphs on your webpage the same styling, you would use classes.

Standards specify that any given ID name can only be referenced once within a page or document. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

Answer 5

ids are unique

• Each element can have only one id
• Each page can have only one element with that id

classes are NOT unique

• You can use the same class on multiple elements.
• You can use multiple classes on the same element.

Javascript cares

JavaScript people are already probably more in tune with the differences between classes and ids. JavaScript depends on there being only one page element with any particular id, or else the commonly used getElementById function couldn't be depended on.

Answer 6

Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."
A simple way to look at it is that an id is unique to only one element. class is better to use as it will help you to execute what ever you want.