Solved

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

Posted on 2014-12-19
4
68 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

751 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