The Power of Classes and IDs

      by Kris Gosser AKA Kristopher : 1 February 2005

Introduction
If you haven't already figured it out, the power of CSS and web standards is within the ability to separate content from mark-up from design. So in this tutorial, I'm going to explain how to use the class and id attributes in your XHTML and when to use them.

The Class Attribute
Just about any XHTML element can have a class assignment. What is a class you ask? Well, think of it as a sticky note. This analogy have been used before so I won't take credit for it, but it's one of the best ways to think of classes and ids. Essentially what you do is create a class in the CSS code and then assign it in your XHTML. Here's an example:

<html>
<header>
</header>
<body>
 
<div class="container"></div>
 
</body>
</html>

The ID Attribute
The id works virtually the same way. It's a sticky note for a specific tag. And just about anything that will accept a class will accept an id. So the following is an example of a div declaring what id it's using:

 

<html>
<header>
</header>
<body>
 
<div id="container"></div>
 
</body>
</html>

Notice how the only thing that changed was class to id? You can probably see how they work virtually as the same.

So what's the difference?

It pretty boils down to one thing: Classes can be referenced more than once per page, while ids can only be referenced once per page? You are probably thinking, "That's pretty pointless." Well, the second other glaring difference is the fact that an element using an id can be referenced in a script. For example, a JavaScript function that needs to get a specific id can call for it. Here's an example:

getElementByID(intro);

Therefore if you ever need to get a specific string or number from something, you can get it by applying an id to the tag element.

The power behind having classes and ids
Essentially the power of smacking a sticky note on something within your XHTML code lies behind the fact that it saves you time and effort, and we all wish things could be a little easier, right? In your external CSS code, if you declare a div to have a certain set of font attributes, it trickles down. For example:

 

div#container {
font-family: Arial, Verdana, sans-serif;
font-size: 10px;
line-height: 1.2em;
color: #999;
}

 

Now all elements inside of the content div will have an Arial font, with a size of 12, a line height of 1.2 ems, and a gray color. This is extremely useful because there's no more font tag for every paragraph, list, heading, and table data cell. Secondly (and most importantly), if you wanted to change the color of the font throughout the whole entire site, you only need to change one line, color: #999;, to get this affect. Whoa, you don't have to go an edit every single font tag!

That's it for this tutorial. I hope you have understood the power and ease of using CSS for designing your site. If you have any questions, feel free to visit our forums, and don't be scared to PM (send a private message) to me, Kristopher, via the forums if you have any questions!

  Kris Gosser
www.krisgosser.com

 

 



SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.