Solved

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

Posted on 2014-12-19
4
67 Views
Last Modified: 2014-12-19
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
Comment
Question by:brucegust
  • 2
4 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 40510139
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
 

Author Comment

by:brucegust
ID: 40510160
I've requested that this question be deleted for the following reason:

I figured it out.
0
 

Author Comment

by:brucegust
ID: 40510158
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
 
LVL 58

Expert Comment

by:Gary
ID: 40510332
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question