troubleshooting Question

What's the difference between an id and a class and how do you notate them?

Avatar of Bruce Gust
Bruce GustFlag for United States of America asked on
CSS
4 Comments1 Solution91 ViewsLast Modified:
Here's what I understand:

A "class" is something you can use repeatedly throughout an HTML document and you can apply it to any one of number of elements; a td, li, p - very hand.

On the other hand, an id is used just once in an HTML document and while you can use it to stylize something, it's more for the sake of uniquely identifying a particular element. A good example would be a Javascript and using an id to specify a particular cell or field.

A class is notated on a CSS sheet with a "#" For example, "#special". I can can then write in my HTML <td class="special" and all of the design elements for I specify as part of the "special" class are applied to that cell.

On the other hand, when I have an id, I use a dot (.). While I can use it stylize elements, it's more for a programming dynamic where I can specify a unique location within an HTML document. The thing that a designer needs to be sensitive to is an id can only be used once in an HTML doc.

Is that right? Am I close?

The reason for all this is I'm seeing some code that I've not really seen before. My HTML is:

<div id="main" class="header">
     <div id="logo">
          <div id="logo_text">
          <h1><a href="index.php"><imsrc="http://www.brucegust.com/images/signature.jpg"    height="100"></a></h1>
          </div>
     </div>
'.$this->getSubnav().'
</div>

My CSS is:

#main {
  background-image: url(images/background_image.jpg);
}


.header {
	background-image: url(images/background_image.jpg);
	width:100%;
	height: 200px;
}


#logo {
	width: 160px;
	height: 170px;
	color: #FFFFFF;
	padding: 20 0 20 40;
	display: block;
}

#logo #logo_text {
	width: 1200px;
	/*background-image: url(../images/vz.png);
	background-repeat: no-repeat;*/
	height: 50px;
	display: block;
	
}

The reason you see "background-image: url(images/background_image.jpg);" twice, both under#main" and the ".header" elements is because I want to use that as a background and it doesn't show up. This is what's prompted my desire to better understand id's versus classes.

Another thing that bothers me is the way #logo #logo_text is documented under my CSS. I couldn't tell you what that means or what's being accomplished. I'm thinking that's two classes that are similiar enough where some shorthand was appropriate.

So, do I understand things correctly, or where I missing something? Is my explanation of ids versus classes on point? If so, then what does my background image not show based on my current code and is my explanation of #ogo #logo_text correct?
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros