ID vs. Class in CSS

HTML-CSS
1

What are the key differences between IDs and classes in CSS? Is there a fundamental reason why you should use one over the other in certain situations? And what kind of situation would dictate the use of one in place of another.

Happy coding. :slight_smile:

2

I believe this was covered in the FCC curriculum somewhere under the CSS section. Basically ā€˜idā€™ is a more specific/targeted form of tag identification with the css file. Class (as the name suggests) is more general and groups tags together (who share similar characteristics for eg.).

I may want to ā€˜idā€™ (identify) a specific tag for its unique behaviour and looks.
I may want to ā€˜classā€™ (group) a set of tags for their common behaviour and looks.

3

class is reusable whereas ids is only used only once.

for example suppose u have 2h2 tags.

h2 class=ā€œsomethingā€> something</h2
h2 class=ā€œsomethingā€>something</h2

by using .something{

}//you target both h2.

whereas Ids is something u only target only once , for example an

input type=
ā€œbuttonā€ id=ā€œbutton-targetā€> </input
// since its only once you can only use the id once.

in terms of specificity Id has higher specificity than classes.

so using another example

#something{
color:red
}

and u use .something{
color:blue
{ // the id will win even though .something class came later. Because the element will be red in color.

in general use classes in css, i have never use ids for css and only use ids , for links for redirection of page to a part of your page , or use it for DOM in javascript

note i intentionally leave out the < in my examples since the post will censor the code

4

Thank you kindly for your reply. I may have breezed through the tutorials a little too quickly. Review is so crucial, no?

5

Yes, whenever I have a question about something new, I always try to find it in the FCC curriculum first then if thatā€™s not enough, I google, and if thatā€™s not enough, I simply ask.

6

Thatā€™s an excellent approach. Iā€™ll have to try that from now on. :slight_smile:

7

sounds good. Note this piece of documentation about this method:
https://forum.freecodecamp.org/t/the-read-search-ask-methodology-for-getting-unstuck/137307?u=hbar1st

8

Good advice.

After following the ā€œreadā€ part of the suggestion, I found this article. Hopefully, someone will come across this article and make use of it. :slight_smile: