First time visitor? The tutorials start here.

Styling ids with CSS

Previously, you learned how to style xHTML tags with CSS. To define <body>, you used:

body {
    ...define those attributes here...
}

Later, you learned how to style classes by placing a dot in front of the class name:

xHTML:

<div class="classname">

CSS:

.classname {
    ...define those attributes here...
}

Now, I will show you how to style ids. For this, you will put a number sign (#) in front of the id name.

xHTML:

<div id="content">

CSS:

#content {
    ...define those attributes here...
}

Since numbers are so often used as unique identifiers in the offline world, such as passport numbers, driver license numbers, tax id numbers, etc., it’s interesting to note that the number sign is used to target ids in both the case of “jump to” links as well as in CSS. I wonder… Did the powers that be have that in mind when they created these rules? Either way, it sure helps to remember the direct relationship between ids and number signs when dealing with xHTML and CSS.

What attributes can you use for ids, you ask? Well, you can use all of the same attributes you can use for class names, plus a few others like “absolute positioning” that you should only use for ids (although you could use them on classes if you really, really want to).

Now it’s time to start getting into CSS for layout.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.