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

HTML

Posted by Hesam Alavi
.a{fill-rule:evenodd;}techdegree
Hesam Alavi
Front End Web Development Techdegree Student 2,280 Points

whats the difference between classes an ids?

whats the difference between classes an ids? when and why should I use one over the other?

Thanks.

bbvjjwjaqq
bbvjjwjaqq
1,849 Points

The difference between classes and ids is that classes are not unique. You can use the same class on multiple elements. ID's are unique, each element can only have one ID and each page can have only one element with that ID.

3 Answers

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Both attributes can be used to style certain HTML elements via CSS, however there are 2 important differences:

  1. A specific ID must be used only once in the HTML, while classes may be reused for multiple elements.
  2. IDs have a functional HTML purpose beyond styling. IDs can be used to create internal (same-page) links using anchor tags. For example a "Back to top" link is normally created with an ID.

Hope this helps,

Sergio

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

Classes can also be appended to other classes.

<div class="one two three"></div>

can be styled with

.one { color: black; }

.two { width: 100px; }

.three { height: 100px; }

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

One more thing I'll add is an ID carries a higher CSS selector weight then a class does, which can screw you up if you're not aware.