Tutorials
Books
Videos
Forums
This is an archived tutorial from the kirupa.com legacy collection. It covers software that may no longer be available, but it is kept online because the ideas still hold up.
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.
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 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.
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 |
Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.
Your support keeps this site going! 😇
:: Copyright KIRUPA 2026 //--