Class vs. ID in css (confusion)

Question

i know i might be asking the same question as other used to ask but i'm really confused with when to use ID and class. I have googled about it and read some posted questions on Stackoverflow here as well but still have doubt about it. I understand that ID can only be used once in a page and class can be use more than one within a class

The below here is CSS style sheet i've practiced on:

html,body{
    padding:0px;
    margin:0px;
    height:100%;
    background-color:#E9E9E9;
}
.infoBoxPad{
    background-color:#DFDFDF;
    width:990px;
    height:19px;
    border:solid thin #CCC;
    margin:auto;
    display:block;
}
#info1{
    float:left;
    width:125px;
    height:16px;
    line-height:15px;
    border-right:thin solid #999;
    padding-left:20px;
    padding-right:20px;
    display:block;
}
#info2{
    float:left;
    width:236px;
    height:15px;
    line-height:15px;
    border-right:thin solid #999;
    padding-left:20px;
    padding-right:20px;
    display:block;
}
#info2-link{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#000;
    margin-left:11px;
    margin-right:11px;
    float:left;
    text-decoration:none;
}
#info2-link:hover{
    text-decoration:underline;
    color:#03F;
}
#info3{
    float:left;
    width:183px;
    height:16px;
    line-height:15px;
    padding-left:20px;
    padding-right:20px;
    display:block;
}
#info3-link{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#000;
    margin-right:15px;
    float:left;
    text-decoration:none;
}
#info3-link:hover{
    text-decoration:underline;
    color:#03F;
}
#info-text-bold{
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:600;
    padding-right:20px;
    color:#000;
    text-decoration:none;
}
#info-text-bold1{
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:600;
    padding-right:20px;
    color:#000;
    text-decoration:none;
}
#info-text-bold1:hover{
    text-decoration:underline;
    color:#03F;
}
#info1-novice{
    color:#09F;
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:600;
}
#info1-novice:hover{
    text-decoration:underline;
}
.header{
    background-color:#FFF;
    width:990px;
    height:80px;
    position:relative;
    display:block;
    margin:auto;
}
#header-logo{
    margin-left:10px;
    margin-top:20px;
}
.nav-bar-wrapper{
    background-image:url(nav-bar.gif);
    background-color:#333;
    width:990px;
    height:40px;
    margin:auto;
}
#nav-bar{
    margin:0;
    padding:0;
}
#nav-bar ul{
    margin:0 0 0 20px;
    padding:0;
}
#nav-bar li{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
}
#nav-bar ul li a{
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    color:#FFF;
    width:105px;
    height:40px;
    display:block;
    line-height:35px;
    border-right:1px solid #FFF;
}
#nav-bar ul li:hover{
    background-color:#666;
    height:35px;
}
.content{
    width:990px;
    height:1000px;
    background-color:#FFF;
    position:relative;
    margin:auto;
}
#earn-point{
    background-image:url(earnNow.gif);
    width:300px;
    height:60px;
}
#content-earnpoint{
    background-color:#fffbe8;
    width:278px;
    height:100px;
    border:solid thin #F90;
    display:block;
    padding:10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
/**************************************************************************************************************Left Column*/
#leftcolumn{
    background-color:#FFF;
    width:300px;
    margin:25px 10px 0px 10px;
    float:left;
}
#guessing-game{
    width:278px;
    height:37px;
    margin-top:25px;
}
#guessing-game-image{
    float:left;
    margin-right:5px;
}
#guessing-game-text{
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#guessing-game-text1{
    color:#00C;
    text-decoration:none;
    font-weight:600;
}
#guessing-game-text1:hover{
    text-decoration:underline;
}
/***********************************************************************************************************Right Column*/
#rightcolumn{
    background-color:#FFF;
    width:640px;
    margin:25px 10px 0px 0px;
    float:left;
}
#advert{
    width:640px;
    height:80px;
    margin-bottom:10px;
}
#earn-reward{
    background-color:#FC3;
    width:640px;
    height:16px;
    padding:5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    line-height:14px;
}
#total-reward-points{
    background-image:url(total%20reward%20points-background.gif);
    width:268px;
    height:184px;
    margin:20px 0px 0px 0px;
    padding:9px 15px 0px 15px;
    border:1px thin solid;
}
#image-counter-heading{
    margin:5px 10px 10px 0px;
    display:inline;
}
#total-update-counter{
    background-color:#F00;
    width:264px;
    height:33px;
    margin:0px;
    padding:8px 0px 5px 0px;
}
#homecounter-heading-wrapper{
    width:268px;
    height:48px;
    margin:17px 0px 0px 0px;
    display:block;
}
#homecounter-heading{
    float:left;
}
#online-shopping{
    width:650px;
    height:30px;
    margin-bottom:5px;
    padding-top:15px;
    padding-left:10px;
    display:block;
}
#onlineshopping-logo{
    margin-top:5px;
}

And html here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Smile City</title>
<link href="smilecity style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="infoBoxPad">
<!--info1-->
<div id="info1"><div id="info-text-bold">Jesso</div>
<img src="novice.gif" />&nbsp;&nbsp;<a href="#" id="info1-novice">Novice</a></div>
<!--info2-->
<div id="info2">
<a href="#" id="info2-link">Points:118</a>
<a href="#" id="info2-link">Entries:29</a>
<a href="#" id="info2-link">Exp:108</a>
</div>
<!--info3-->
<div id="info3">
<a href="#" id="info3-link">Account Setting</a>
<a href="#" id="info-text-bold1">Sign Out</a>
</div>
</div><!--End infoBoxPad-->

<div class="header">
<img src="smilecity logo.gif" id="header-logo" />
</div><!--End header-->

<div class="nav-bar-wrapper">

<div id="nav-bar">

<ul class="nav-bar">
<li><a href="#">Home</a></li>
</ul>

<ul class="nav-bar">
<li><a href="#">Join</a></li>
</ul>

<ul class="nav-bar">
<li><a href="#">Earn</a></li>
</ul>


<ul class="nav-bar">
<li><a href="#">Redeem</a></li>
</ul>


<ul class="nav-bar">
<li><a href="#">Account</a></li>
</ul>

<ul class="nav-bar">
<li><a href="#">Help</a></li>
</ul>

</div><!--End nav-bar-->
</div><!--End nav-bar-wrapper-->

<div class="content">
<!--
-->

<div id="leftcolumn">
<div id="earn-point"></div>
<div id="content-earnpoint">
<strong>Hi Jesse, </strong>here's what you can do to earn points right now:
<div id="guessing-game">
<img src="gameYellowBg.gif" id="guessing-game-image" />
<a href="#" id="guessing-game-text1">Play the Guessing Game</a> and you could win up to 105,000 points.
</div>
</div><!--End Content-earnpoint-->

<div id="total-reward-points">
<img src="counterHeading1.gif" id="image-counter-heading" />
<div id="total-update-counter"></div>

<div id="homecounter-heading-wrapper">
<img src="homeCounterHeading2.gif" id="homecounter-heading" />
<img src="checkSml_sc.jpg" id="homecounter-heading" />
</div>

</div><!--End Total reward points-->

</div><!--End Left column-->

<div id="rightcolumn">
<div id="advert"><img src="ads.jpg" /></div>

<div id="earn-reward">
<strong>Earn Rewards</strong>
</div>

<div id="online-shopping">

<img src="onlineShoppingHome.gif" id="onlineshopping-logo" />

</div><!--End Online-shopping-->

</div><!--End Right Column-->

</div><!--End Content-->

</body>
</html>

I think i've made a mess in this css style sheet there since i've use heaps of IDs. Please guys, tell me when/how to use ID and class? Thanks in advance!

Edit:How about this picture? is that how you define when to use ID and Class?

Answer 1

ID's are faster (with rendering) mind you. Use an ID whenever it's a unique element with unique styling. If you want to apply the exact same styling somewhere else as well, make it a class so that it only needs to be loaded once.

An ID is unique where as the word "class" applies to a group of something in every definition of the word so use it as such. It's a repeatable pattern in CSS. An ID identifies a unique object that doesn't appear anywhere else on the page where as a class is just something you can slap onto anything.

Answer 2

Class: a number of persons or things regarded as forming a group by reason of common attributes, characteristics, qualities, or traits; kind;

ID: IDentification.

class = multiple instances to be styled.

id = unique instance to be styled (once per document).

Answer 3

An ID refers to a specific element, while CLASS refers to a type of element.

When your CSS says

#searchBox{...}

You are saying there will be one item called with the ID of "searchBox" and this is how you want it styled.

<div id="searchBox">Search Box Content</div>

When your CSS says

.redBorder{...}

That means you will have multiple entities, that all are of the class "redBorder"

<div id="item1" class="redBorder">Content1</div>
<div id="item2" class="redBorder">Content2</div>
<div id="item3" class="redBorder">Content3</div>

instead of

#info1{
    float:left;
    width:125px;
    height:16px;
    line-height:15px;
    border-right:thin solid #999;
    padding-left:20px;
    padding-right:20px;
    display:block;
}
#info2{
    float:left;
    width:236px;
    height:15px;
    line-height:15px;
    border-right:thin solid #999;
    padding-left:20px;
    padding-right:20px;
    display:block;
}

<div id="info1">...</div>
<div id="info2">...</div>

try

.info{
    float:left;
    line-height:15px;
    border-right:thin solid #999;
    padding-left:20px;
    padding-right:20px;
    display:block;
}
#info1{
    width:125px;
    height:16px;
}
#info2{
    width:236px;
    height:15px;
}

<div id="info1" class="info">...</div>
<div id="info2" class="info">...</div>

Answer 4

I think of classes as the framework, and id's as the finishing touches. Classes can be recycled over and over again, but id's are usable only once (I think most browsers let you use them multiple times though, which isn't very helpful). I mainly use classes to organize my elements:

.red
{
  color: rgb(255, 0, 0);
}

.underline
{
  text-decoration: underline;
}

#floatRight
{
  float: right;
  clear: both;
  padding: 30px;
}

#redBorder
{
  border: 2px solid rgb(255, 0, 0);
}

This would be valid CSS, as expected. The cool thing is that you can use classes multiple times inside of an element, but id's are single-use:

<span id="floatRight" class="red underline">Hello!</span>

This would produce a red block of text that's underlined and floating to the right.

<span id="floatRight redBorder" class="red underline">Hello!</span>

This shouldn't make a red border, as id's are unique to a single element (JavaScript uses that to find elements).

Id's are like license plates: they identify certain cars. It would be useless to let people use identical license plates for multiple cars, so id's are the same way. You use them uniquely.

I'm not sure if that explains it...

Answer 5

My philosophy: use id's a little, use classes a lot.

What I mean by that is only give id's to elements that need them: form elements, primary sectioning elements, unique items

As for classes, I try to provide as many useful descriptive classes as possible. The key is to make sure they're consistent and semantic.

If you need numbers in your id's or classes, you're probably doing it wrong. Instead of labeling every list item within a list:

<ul>
  <li id="item-1"></li>
  <li id="item-2"></li>
  ...
</ul>

just label the list itself:

<ul id="special-list">
  <li></li>
  <li></li>
  ...
</ul>

as you can access any item within the list using the list id (#special-list) followed by :nth-child(), or li + li...

Answer 6

You are not supposed to have multiple IDs. Basically when in doubt just use class. IDs are good for specific elements that you need to access. So it would be like a parent type of element where theres no html inside. At least thats what i do.

Answer 7

IDs should always be unique, classes don't need to be. Simple as that. Anything else is preference.

Having said that, I think it looks neater to use child selectors as much as possible. So instead of .info2-link use #info2 a. That way you don't need to add classes to everything.

Answer 8

I tend to use IDs for positioning or in case I will need to select a specific element through javascript. Classes are more for applying styles to things you will reuse over and over.

In your case things like the header and navigation should be an ID. Also be sure not to name a class the same as an ID, as in your nav-bar:

<div id="nav-bar">

<ul class="nav-bar">