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 How to Make a Website Adding Pages to a Website Style New Pages

Amit Panhale
Amit Panhale
1,436 Points
Posted by Amit Panhale
Amit Panhale
1,436 Points

Difference between div, class and id

When to use what?

2 Answers

Kathryn Ann
Kathryn Ann
10,071 Points

Hi Amit - The div tag is used to divide up the page into sections, for organizational purposes and to help you style sections of the page differently. Class and ID are attributes that you can apply to different elements, including div elements, so you can select them with CSS to apply styles that you specify for that class or ID.

Use ID if there's only one element on your page that's going to be styled a certain way (there should only be one element corresponding to each ID that you use) and use class if you want to apply the same styles to multiple elements.

Does this help?

Don Brubaker
Don Brubaker
2,518 Points
Don Brubaker
Don Brubaker
2,518 Points 
<div> are typically used to group sections together, they don't show up on the page
      example

     <div>
           this is a bunch of stuff in the first section
     </div>
     <div>
          this is a bunch of stuff in the second section
        <p>
             something in here
        </p>
     </div>
you might think of them like invisible tables, 
using css you can target the div statements, example

     div {  font-style: italic; }
     would make everything located within to \<div\>\</div\> italicized

-------------

IDs - can only be used once within the page and help pinpoint a specific item, 
       IDs can be targeted using things like CSS or Javascript, and can be used 
       on any item you wish to target.
example;
  <div ID="item1">
       this is a bunch of stuff in first section
  </div>
  <div ID="item2">
      this is a bunch of stuff in the second section
      <p ID="item3">
           something in here
      </p>
  </div>
          css for above uses the # sign to target the ID

          #item1 { text-color: red; }
          #item2 { text-color:  green; }
          #item3 { text-color: blue; }
         this would make each line a different color

--------------


class - can be used over and over to target parts of your page, 
example

   <div ID="item1" class="bold">
       this is a bunch of stuff in the first section
   </div>
   <div ID="item2">
        this is a bunch of stuff in the second seciton
       <p class="bold">
           something in here
       </p>
   </div>

       css for above uses the "." (period sign) the target the item

        .bold { text-weight: strong; }
       here each line that has a class will be bold
             this is a bunch of stuff in the first section   <--- would be bold 
             this is a bunch of stuff in the second section  <--- would not be bold
             something in here   <-----   would be bold


And it is entirely up to you, where and how you want to use these


I hope that helps explain a little better.

PS: 
I don't know why they don't use a normal forum software.
sorry about the background and text color