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
Doug Tvedt
5,354 PointsWhat is the difference between class and id attributes and how should they used in html coding?
In how to make a website, both class and id attributes are used to identify elements. They seem to have a similar purpose, but I don't understand when I should use a class attribute vs. an id attribute. Can you clarify?
4 Answers
Damien Watson
27,419 PointsHi Doug,
An 'id' is a unique identifier, used for targeting certain elements, or tagging parent elements. This can help to target elements through javascript. An example may be something you want to identify as unique, like <ul id="portfolio">. I set major elements with an 'id'.
'class' is something that can be reused multiple times to style elements. An example may be ' class="top" ' which can be applied to all return to top anchors in your site.
Raphael Carvalho
371 PointsSo you have many examples ready all comments but i'm show a good example work for me when i was started with css.
Class
wrapper{ width:800px; margin:0 auto; }
<body>
<header class='wrapper'></header>
<section class='wrapper' ></section>
<footer class='wrapper' ></footer>
</ body>
In this example wrapper align the tags in the center of page and i use a class because i need align every elements.
(#ID) is unique for one element but wrapper class in the example if i change width or margin will be affected all elements (header,section and footer), different of #id i use when i want change only one element,
You need use id like that
ID
id # footer-content{ color: gray; font-size: 10px font-style: sans-serif,Arial,verdana; text-align:center; }
.information-text{ color:red; font-size: 12px; background:yellow; }
<body>
<header class='wrapper'></header>
<section class='wrapper' >
<h1>Hello World</h1>
<p class='information-text'>Caution Petrobras is Broken</p>
<p>Normal Text</p>
<p class='information-text'>i Can have more information text and i will use class to apply</p>
</section>
<footer id='footer-content' class='wrapper' >
<p>@[Raphael Carvalho](https://teamtreehouse.com/raphaelcarvalho) All rights reserved 2015*</p> <!-- I want apply the style only the footer and anyplace more -->
</footer>
</ body>
so the example show i can use class more just one time, and ID is unique time hope i help y ; ) Att, Raphael Carvalho
Sorry my English is not a great thing but i'm trying help
John Magee
Courses Plus Student 9,058 PointsIt has to do with more complex things like javascript and identifying the elements in the document you want to identify.
The class can be assigned to many different elements...it's also useful for formatting many elements the same way, and can be assigned to as many elements as you want
The id can also be used for formatting but an ID should be used only ONCE per page.
Doug Tvedt
5,354 PointsThank you all. Very good information! Doug
Anton Bozhinov
12,381 PointsAnton Bozhinov
12,381 PointsHi Doug, welcome to Treehouse !
The main difference between "class" and "id" attribute is that many elements can have the same "class" but they can not have same "id". You will use both of them for mostly styling purpouses at the begining.
For example: You have a group of 10 people - students and teachers. You can "class"ify them for example : 8 people - class students 2 people - class teachers Beacouse they share the same characteristics. You can have only one ID for and element in this example the people's name First student is Ron, second -John and so on...
Hope that helps!