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

Giovanni Chiaro
Giovanni Chiaro
1,762 Points
Posted by Giovanni Chiaro
Giovanni Chiaro
1,762 Points

Difference between ID's and Class in HTML and CSS

Which is the difference between ID's and Classes, for instance, I know that if I declare

< div id="primary" >

primary { text-align:center; }

I am gonna change the position of the text of only for that ID instead if I am going to attribute

< div class="primary" > .primary { text-align: center ; } I am going to change that Div and also the future DIv's in the HTML ? Am I right ?

1 Answer

Kevin Beall
Kevin Beall
13,828 Points
Kevin Beall
Kevin Beall
13,828 Points 
< div class="primary" > 

.primary { 
    text-align: center ; 
}

Q: I am going to change that Div and also the future DIv's in the HTML ? Am I right ?

A: Not quite. This will only change the future <div>'s that have the class "primary".

Added a little more below to explain.

An ID is unique and can only be added to any HTML tag once within your HTML. (e.g. This would not be possible)

<div id="primary"></div>
<h1 id="primary"></h1>

A class can be added to multiple HTML tags. This can allow you to change the style in many HTML tags at one time.

<div class="primary"></div>
<div class="primary"></div>
<div class="secondary"></div>

.primary {
    text-align: center;
}

This will apply the text-align property all divs with class "primary" but not to the div with class "secondary".