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!
The Power of Classes and IDs
