What is the difference between id and class in CSS, and when should I use them? [duplicate]

Answer 1

The class attribute can be used with multiple HTML elements/tags and all will take the effect. Where as the id is meant for a single element/tag and is considered unique.

Moreoever the id has a higher specificity value than the class.

Answer 2

IDs must be unique--you can't have more than one element with the same ID in an html document. Classes can be used for multiple elements. In this case, you would want to use an ID for "main" because it's (presumably) unique--it's the "main" div that serves as a container for your other content and there will only be one.

If you have a bunch of menu buttons or some other element for which you want the styling repeated, you would assign them all to the same class and then style that class.

Answer 3

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 4

A simple way to look at it is that an id is unique to only one element.

A class is not unique and applied to multiple elements.

For example:

<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>

Content is a class since it'll probably apply to some other tags aswell where as "veryImportant" is only being used once and never again.

Answer 5

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.

Answer 6

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.