First time visitor? The tutorials start here.

Adding Class Names in xHTML

In the previous tutorial, I showed you how to style xHTML tags with CSS. Now, I will show you how to add “classes” to xHTML tags, so you will be able to fine-tune the styling of your pages.

What is a class?

Just think of it as a “classification” in everyday language. If two or more things are in the same class, they share some or all of the same characteristics.

I think the best way to explain this is to show it in use. In the practice files you downloaded here, open practice1.htm in Crimson Editor and change the first <p> to this:

<p class="intro">

Save practice1.htm, then open /styles/style.css and add this to the end of it:

.intro {
    font-weight: bold;
    width: 50%;
    padding: 0.5em;
    margin: 5em auto;
    border: 1px solid #cccccc;
    text-indent: 0;
    color: #000000;
    background-color: #ffff99;
}

Now save style.css and open practice1.htm in your browser.

Wow! That practice page just gets uglier every time I tell you to make a change!

Adding classes to your xHTML tags

As you may remember, I first introduced xHTML “attributes” when I talked about links. To refresh your memory…

<a href="http://google.com">Google</a>

Here, href is the attribute name, and http://google.com is the attribute value. With classes, class is the attribute name, and whatever you name the class is the attribute value:

<p class="intro">A paragraph of text here.</p>

<a class="whatever" href="http://google.com">Google</a>

That can also be written as:

<a href="http://google.com" class="whatever">Google</a>

Is there a list of class names I can use?

No. You’ll have to come up with those yourself. Seriously, that’s a good thing. You can give a class any name you want to, as long as it follows these rules…

  • It may contain letters (a-z, A-Z), numbers (0-9), underscores (_), and hyphens (-).
  • It cannot contain anything else, not even spaces.
  • It must start with a letter.

How do I decide on a class name?

It helps if you make it describe the content, to make it more memorable. In the example I gave near the beginning of this article, I told you to put class="intro" into the first paragraph’s <p> tag, as that paragraph could be the introduction to the page.

Don’t use things like class="blue" or class="green", because you might want to change the color scheme of your website someday, and that would only make such a description confusing. Why? Because when you change the color scheme – or even the entire layout – of your website, you won’t be touching the xHTML at all and will be doing it entirely through your CSS file.

That’s right, old-schoolers! Changing the look of your site won’t be a huge undertaking, because you won’t have a gazillion <font> tags on dozens (or even hundreds!) of pages to weed through when you do it. Instead, you will only need to change that one CSS file. Well, maybe two if you need to use a special style sheet for Internet Explorer (IE). Remember how I mentioned browser differences at the beginning of these tutorials? Well, IE is so bad at keeping up with web standards, that there is a special way to target IE with IE-specific CSS.

Before moving on with how to style classes in CSS, I’d like to introduce another xHTML tag:

<span>

No, not spam. span. This is a generic tag that is good for adding bits of styling here and there. If you are styling a word or phrase that doesn’t already have a tag surrounding it and it alone, then you may have a use for a <span> tag at that point.

Throughout these tutorials, I have been color-coding words to help you see how they relate to each other, and I have been using <span> tags for this. When I show how nesting is done, I use <span class="nest1"> for the outer tag, <span class="nest2"> for the tag inside that, <span class="nest3"> for the tag inside that, and <span class="nest4"> for the innermost tag (when there are 4 nested tags). Notice how I gave them names that pertain to what they’re being used for, so I can easily remember them as I’m typing my blog posts.

I even cheated a little, recycling nest1 and nest2 when explaining property name/value pairs.

Practice

For your next practice session, open practice1.htm in Crimson Editor. For the 2nd paragraph, add class="second" to the opening <p> tag, the same way you added class="intro" to the first. Then, pick three words or phrases at random and put <span class="highlight"> before each of those three words or phrases, and </span> after each of those three words or phrases.

Finally, pick three additional words or phrases – or more, if you’d like – and put <span> tags around them, giving them any class name(s) you wish.

When you’re finished adding your <span> tags to the page, make sure to put at least one of them in the “intro” and/or “second” paragraph, and at least one of them in a paragraph that doesn’t have a class.

Next up, styling those classes with CSS.

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.