Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 72
  • Last Modified:

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

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>

Open in new window


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;
	
}

Open in new window


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?
0
brucegust
Asked:
brucegust
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
I suspect you mistyped part of your explanation, so to clarify:

#someid is for an element with id "someid".
.someclass is for an element with class "someclass"

In order to "see" the background image, the element has to have width and height. So if there was some text inside that element, you would see at least part of the background. If you do not intend to put any content inside the element, then you need to specify the width and height of that element, for example:

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

Open in new window

Now you will not need o duplicate the background image rule.

Regarding the #logo #logo_text{}. This is redundant. an ID has the greatest specificity (look that up) in CSS. So there is no need to prefix #logo_text with #logo. While it doesn't hurt to prefix the id, you can (and should) only write it like this:
#logo_text {
	width: 1200px;
	/*background-image: url(../images/vz.png);
	background-repeat: no-repeat;*/
	height: 50px;
	display: block;
}

Open in new window


For best practices, avoid using IDs to do styling. They should only really be used to identify unique elements to be used by javascript - form elements being a typical use case.

I hope this explains it a little. If you need more help please ask.
0
 
brucegustAuthor Commented:
I've requested that this question be deleted for the following reason:

I figured it out.
0
 
brucegustAuthor Commented:
Whoops! I hadn't refreshed the screen before I saw Kyle's answer. Please "reinstate" the question so I can give Kyle credit.

Thanks!
0
 
GaryCommented:
I know Kyle has answered the question very well but have a read through these links
http://css-tricks.com/the-difference-between-id-and-class/
http://oli.jp/2011/ids/

It does a great job of explaining it all and the scenario's for their use.

To summarise - Keep your selectors simple, don't use ID's unless you need to (for which there are no reasons - in fact the only time I do use them is for HTML5 tags where older browser don't recognise them)

Always use Classes over ID's
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now