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 trialMicole Noddle
5,797 PointsWhy use both an id and a class for the header? Don't we need a div for an id? I find that code to be very confusing...
I've never seen it written this way. Isn't there a cleaner way to do it?
3 Answers
Wendy Peralta
11,203 PointsHey! I believe the reason why he kept the id="top" in the header is because remember at the bottom of the page, we have a link that says "Back to top >>" which when clicked, takes you back to the top of the page. The way to achieve this is by adding the id "#top" to the href attribute in the anchor tag: <a href="#top">Back to top ยป</a>
Since we want to style the header as well, we can go ahead and give it a class, even though it already has an id. And like David Tonge said, IDs are not exclusively for divs. You can use IDs in any element.
Hope this helps! :)
David Tonge
Courses Plus Student 45,640 PointsYou don't need a div to use an ID. You can actually add an ID to any element.
ID's are unique
Each element can have only *one* ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
You can have both. IDs are good as hooks for Javascript.
ANDREA HEMPHILL
14,484 PointsI think that using both allows you to make specific changes to the header by using the ID, and then shared changes by using the class. For example, we may want the top header section to always stay blue, so we would use an ID, but we may want the text to match the paragraphs in the body so we could use the class.
Micole Noddle
5,797 PointsMicole Noddle
5,797 PointsOh, sorry, here's the code from Guil's video:
<header id="top" class="main-header">