Solved

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

Posted on 2014-12-19
4
65 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now