Difference between ID and Class in HTML .

Question

What is the difference between these two...when to use Id and when to use Class for styling elements use CSS ???

Answer 1

Use ID when you want to specify the identity of a single element. Use CLASS when you want it to apply to multiple elements. For example, my ID is Jakob and I'm part of the middle CLASS. Get what I mean? Middle class applies to multiple individuals, and my ID belongs to just me.

As an example, lets say that you want to apply RED color and BOLD font weight to multiple objects. Instead of specifying that for multiple elements individually, you could put that styling inside of a class instead and then simply apply the class to each of those elements.

Answer 2

Thank you Jakob Marley , ihateonions and John wells for your reply

Answer 3

To expand on Jakobs response,

.myclass {color:#ff0000;}

<div class="myclass" id="firstDIV">Hello</div>
<div class="myclass" id="secondDIV">Hello</div>
<div class="myclass" id="thirdDIV">Hello</div>

Each div tag will show the content in the colour red.

No point in declaring these IDs within the stylesheet as you would have the same red colour for all three ID styles. for example...

#firstDiv {color:#ff0000;}
#secondDiv {color:#ff0000;}
#thirdDiv {color:#ff0000;}

So simply use a class to define a style and the IDs for identifying elements. Best example is using javascript. document.getElementById(secondDIV).. would be better than selecting the element via its class.

Hope this helps.

Answer 4

You can also assign multiple classes to elements so you could use red as a class to color elements red, big as a class to use a bigger font size, and center as a class for centered elements with the other classes you would want similar to those.