Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors ID Selectors

Owais Ul Haq
Owais Ul Haq
2,020 Points

CSS ids and class

Hi,

Can some one please tell me the main difference between css ids and class ?

Thanks

Cameron S
Cameron S
20,537 Points

Hi there- the difference is:

ID's are unique. Each element (<div> </div> or <p></p>, etc. can only have one ID. In addition, each page can only have one element with that same ID. You can call an ID in your CSS by using the '#' before the name of the ID, i.e. #myid

Classes are not unique. You can use the same class on multiple elements. In addition, you can have multiple classes on the same element. Say you have <p class='myclass'></p>. You can use that same class on any other element in that page to provide the same attributes defined in your CSS.

4 Answers

Steven Parker
Steven Parker
231,248 Points

Good question!

These are both ways to identify elements, but an element can have only one ID, and it must be unique — no other element in the document can have the same ID.

On the other hand, an element can have more than one class, and other elements can share the same classes.

Christopher De Lette
PLUS
Christopher De Lette
Courses Plus Student 7,139 Points

Hi Owais Ul Haq ,

id's are attributes used in html and can only be referred to once, whereas a class attribute can be added to limitless other elements and called upon when using CSS. Check out MDN HTML Attribute Reference Sheet

Hope this helps

Take care and Happy Coding!

Owais Ul Haq
Owais Ul Haq
2,020 Points

Thank you all really appreciate it. :)

class selectors are designated with the (.) in front of the element and can be used more than once on the index.html page: and the (#) element can only be used once (onetime only) on the index.html page. But both assign the syles on the style.css page.