Cascading style sheets use “id” or “class”

Question

when styling specific html elements, i tend to always use the class attribute. the css code looks cleaner imo.

why do both exist which one should you use and when ?<

Answer 1

ids identify elements. classes classify elements.

Put a class on an element if "it's a kind of ..." (e.g. address)

Put an ID on an element if "it is the ..." (e.g. navigation)

Answer 2

As far a HTML is concerned, an id identifies a single element in the DOM and each element can only have one unique id, whereas a class classifies one or many elements in the DOM and each element can have multiple classes.

<div id="this-unique-element" class="class1 class2 class3">...</div>

Also from a CSS perspective, remember that the order of importance goes from least specific to most specific. So, #id properties override .class properties, which in turn override tag properties. Therefore, #id styles trump .class styles unless certain class properties are flagged !important.

<style>
    #red1, #red2 { color: red; }
    .blue1 { color: blue; }
    .blue2 { color: blue !important; }
</style>

<p id="red1" class="blue1">This text is red.</p>
<p id="red2" class="blue2">This text is blue.</p>

Answer 3

Where to use an ID versus a class

The simple difference between the two is that while a class can be used repeatedly on a page, an ID must only be used once per page. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section. In contrast, you must use a class to set up alternating row colors on a table, as they are by definition going to be used more than once.

IDs are an incredibly powerful tool. An element with an ID can be the target of a piece of JavaScript that manipulates the element or its contents in some way. The ID attribute can be used as the target of an internal link, replacing anchor tags with name attributes. Finally, if you make your IDs clear and logical, they can serve as a sort of “self documentation” within the document. For example, you do not necessarily need to add a comment before a block stating that a block of code will contain the main content if the opening tag of the block has an ID of, say, "main", "header", "footer", etc.

Answer 4

There are many ways of selecting a style. You can use id's, classes and tags, and you can combine them:

#nav - applies to the element with id="nav"

#nav div - applies to any div element inside the element with id="nav"

#nav .left - applies to any element with class="left" inside the element with id="nav"

.item span - applies to any span element inside the element with class="item"

.item .address - applies to any element with class="address" inside the element with class="item"

div.item - applies to any div element with class="item"

#nav div span - applies to any span element inside a div element inside the element with id="nav"

Important for css selectors is how specific they are. An id is more specific than a class. With this style:

.dark { color: black; }
#bright { color: white; }

This element would get white text, as the style using the id is more specific than the style using the class:

<div id="bright" class="dark">Hello world</div>

There is even more to know about selectors and specificity. I have found this tutorial to be a good overview of selectors: Selectutorial

Answer 5

Read the description of the id and class attribute in the HTML 4.01 specification.

Answer 6

I mostly use ID to identify specific elements within elements already having a class assigned. That way I can identify easier what element gets which styling.

Not really sure if there is a real other difference between them, other than that you can only use an ID once in a page...