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

Posted by Ravi Kumar
Ravi Kumar
3,189 Points

Difference between class and id .... and background and background-color..??

Plz give me the difference between class and id .... and background and background-color..??

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

ID element can only be used on one element while class can be used for many elements.

All the elements with the class hello will have the same effect.While for id, only one element. Background is the shorthand property for background-color,background-image and more. Background-color specifies the color of an element. I hope this helps you out.

<div class="hello">Div one</div>
<div class ="hello"> Div two</div>
<div class ="hello">Div three </div>
<div id="hello">I am a div and I can only be use on one  element</div>

.class {
     background:red;
     color:#fff;
     height:200px;
    width:200px;
}

#hello {
  background:red;
     color:#fff;
     height:200px;
    width:200px;

}

6 Answers

Christopher Loyd
PLUS
Christopher Loyd
Courses Plus Student 5,806 Points
Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points

IDs are hook attributes that allow you to specify a specific element on a page.

  • Only one ID can be added to an element

  • Each page can have only one ID for a given ID 'name'

Classes are hook attributes that allow you to specify one or more elements on a page.

  • An element can have any number of classes associated with it.

The main difference being, that classes do not have to be unique to the element in which they're associated.

As an example of this, lets say your website has a particular button for submitting a forum post. You may give the forum post submit button an id="forum-post-submit". This is the only element on that page that can have the id="forum-post-submit", and therefore you can call work with JUST this element if need be.

Likewise, you may have multiple different buttons on a web page that you'd like to all style the same. You could have a class called "button-style" and add that class to your buttons within the webpage, any elements with the "button-style" class would inherit the styling of the class selection in your CSS.

Background is a shorthand for multiple background properties. background-color is specific to the color of the background.

With the background property, you can shorthand your styling to include things like background-image, background-size, background-position, etc.

Example

body {
  background-color: black;
  background-image: url('bg.gif');
  background-position: center;
}

Could be simplified to:

body {
  background: black url('bg.gif') center;
}
Ravi Kumar
Ravi Kumar
3,189 Points
Ravi Kumar
Ravi Kumar
3,189 Points

Still confusion.... We can replace id with class , i think both will behave in same way ???

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Yes, we can replace id with class. But remember id can only be apply to one element on a page while class with many elements.

Ravi Kumar
Ravi Kumar
3,189 Points
Ravi Kumar
Ravi Kumar
3,189 Points

Now id and class are clear friend but now confusion is of backround color and simple background...

Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points
Christopher Loyd
Christopher Loyd
Courses Plus Student 5,806 Points

Instead of having to type out each individual background property (background-color, background-image, etc.) you can just simply call the background property itself, and combine all of your individual background specific properties. It's just a shorter way of annotating your code. It has no technical difference whatsoever.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Background-color sets the color of an element. For example

<div class="kumar">
</div>

 #kumar {
   background-color:crimson;/* the background color is now crimson*/
   color:white;/*the text color is now white*/
}

 #kumar {
background:crimson; /*shorthand for background-color*/
color:white; /*text color is now white*/
}
Ravi Kumar
Ravi Kumar
3,189 Points
Ravi Kumar
Ravi Kumar
3,189 Points

okk bro...

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

You got it now bro?

Ravi Kumar
Ravi Kumar
3,189 Points
Ravi Kumar
Ravi Kumar
3,189 Points

yes.. Thanks