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
Steve Davies
10,389 PointsStruggling to get the concept of ID and DIVs
Hi, I am struggling to get the use between ID and Class.
I understand there are limits, a class can be used anywhere, ID can only be used once on a page, but I can't figure out when to use an ID or a Class. Initially I would go for a class.
Can anyone help illustrate the use of ID and Class? I am a print designer by trade so anything associated to that would be a great help!
Many thanks
Steve
11 Answers
Dustin Matlock
33,856 PointsUse a class tag if:
- The style is used in various places throughout the document.
- The style is very general.
Use an id tag if:
- The style is only used once ever in the document.
- The style is specific to a certain area of the document.
Additional Resources
Collin Berg
33,471 PointsI'll try and use a large group of people as an example. Say you get 10 university students in room. each one has a class, some may be class="freshman" and some may be class="senior" or 4 may have class="boy". Its ok to have 3 people who have the same class. However, their names,( ID) is unique to each of them. you cannot have two people with ID='Joe", or everything will be confused. So a person could have ID="joe" class="freshman boy". its OK to have more than one class on a div, but it can only ever have 1 ID and no one else on that page can have the same ID. I hope that helps.
Andrew Helton
4,681 PointsI'll do my best. On the front page of a newspaper, you usually have one chief heading. Let's translate this to HTML as an h1 heading element. It's the primary heading element on the page and therefore will only be used once. In this case, it would be proper to use an ID since there will only be one occurrence of the h1 element (chief-heading).
However, referring back to the newspaper example, you might have various subheadings beneath the chief heading to segregate different stories and articles. Let's again translate this to HTML, but this time your are going to use h3 elements to reference all subheadings. You are going to want to style all of your h3 elements (subheadings) the same, so you would want to give them all the same class name. Giving them all the same class name allows you to easily style all the h3 headings on the page to look precisely the same. See the markup below for a visual example:
<body>
<h1 id="chief-heading">New President Elected in Landslide</h1>
<h3 class="subheading">Middle East of brink of major war</h3>
<h3 class="subheading">Cardinals win World Series</h3>
<h3 class="subheading">Local man save cat from tree</h3>
</body>
Your CSS might look something like this:
#chief-heading {
font-size: 3.5em;
color: red;
}
.subheading {
font-size: 1.75em;
color: black;
}
Hope this helps, Andrew
Derick Hitchcock
5,736 PointsI'd just use a class, unless you need to target a specific item for some reason, then in that case I might use an id.
So if you have a list of your friends, I'd put a class on each element of, say, friend. But, if you were targeting your best friend at the top of that listing, you'd probably add the friend class again (to keep much of the styling and whatnot consistent), but then in order to target that one friend in particular, I'd also either add an additional class like, say, best-friend, or I'd add an id of best-friend.
If it were me, I'd probably use the class approach whenever possible.
martinjones1
Front End Web Development Techdegree Graduate 44,819 PointsHopefully this article will also be of help:
Derick Hitchcock
5,736 PointsI'd just use a class, unless you need to target a specific item for some reason, then in that case I might use an id.
So if you have a list of your friends, I'd put a class on each element of, say, friend. But, if you were targeting your best friend at the top of that listing, you'd probably add the friend class again (to keep much of the styling and whatnot consistent), but then in order to target that one friend in particular, I'd also either add an additional class like, say, best-friend, or I'd add an id of best-friend.
If it were me, I'd probably use the class approach whenever possible.
Collin Berg
33,471 PointsI'll try and use a large group of people as an example. Say you get 10 university students in room. each one has a class, some may be class="freshman" and some may be class="senior" or 4 may have class="boy". Its ok to have 3 people who have the same class. However, their names,( ID) is unique to each of them. you cannot have two people with ID='Joe", or everything will be confused. So a person could have ID="joe" class="freshman boy". its OK to have more than one class on a div, but it can only ever have 1 ID and no one else on that page can have the same ID. I hope that helps.
Dominique Smith
14,840 PointsIf you know that your only going to use it once or its unique, go with an ID.
The best way I can describe it for print design; Say for instance that your designing a 3 page brochure and you know that there is going to be one image in it, you can assign that image an ID. Classes can be for more general functionality like your color schemes or sections which is going to be used multiple times.
The more unique = ID, the more general it is = Classes. I hope this helps answer your question.
Steve Davies
10,389 PointsGuys, thank you so much, you have made it sound much clearer - all of the illustrations are great - I appreciate it greatly!
Cheers - Steve.
Victor Rodriguez
15,015 PointsAn id is exactly as it sounds. A unique identifier for an element. If you have something you want to be applied only once to a specific element, an id is what you are looking for. On top of that, for Javascript purposes, if you want to apply effects to only one element on a page specifically, you need to use a unique identifier, like say... an id. As a general rule of thumb, think of ids and classes as things used as much for styling as they are for organization. An id goes for single application and a class is used for multiple applications. Classes can be used repeatedly on multiple elements in case you need to reuse a particular styling format.
for example: I have a groups of div elements all over my page that i want to have blue backgrounds. I'll use a class to control that. I have one specific element in there that I want to have an onClick() function that does something specific. Like change the background color to green. I'll use an id.
Just remember an element can have one, both, or neither. If you think of it as an organizational attribute, it'll all make sense.
cp88
5,039 PointsIf you think of it in real world terms (cars for example), the class is the make or model (Ford) so you can have several cars all with the class of Ford, but the ID is akin to the car registration number (not sure what this is called in other countries). So any time you used the ID of EK52 THG it would only ever relate to one specific car.