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>
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;
}
The reason you see "background-image: url(images/background_imag
e.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?
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Most Valuable Expert award recognizes technology experts who passionately share their knowledge with the community, demonstrate the core values of this platform, and go the extra mile in all aspects of their contributions. This award is based off of nominations by EE users and experts. Multiple MVEs may be awarded each year.