Solved

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

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

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

624 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