CSS with a little Class

I couldn't help myself with the title. In a previous post we talked about using class a little more often than ID's, and I thought I'd expand on the class tag a little more.

The class tag in HTML is used to define different sections of the web page that you want to look the same, so you can later style those sections of the page with CSS or JavaScript.

For example, it can be used to make all the numbers on a page look bigger, or it could be used across several pages to identify different specific parts of your page that you would like to look the same on every page of your web site.

The class attribute looks something like this:

In a div:
.... something goes here ....
And inline: The quick brown fox jumped over the lazy dog.

You can put a class attribute on any html tag. You'll noticed I put a slash ending on each HTML tag, in addition to, making it HTML5 compatible, it also defines the end of the class.

One problem you may have in your CSS styling is caused by not ending HTML tags. This is one of the reasons you should always validate both your HTML and CSS scripts. Validating will pick up where you missed those nasty end tags, and make sure you haven't missed any ":" or ";" in your CSS script.

Let's get into some unique things we can do with the class attribute. You can combine class and id attributes in a single tag. The ID tag is the unique name of a section of the page, and that name can only be used once on the page. Here's an example of an ID and CLASS tags together:

In a div:
.... something tomish goes here ....
.... something dickish goes here ....
.... something harryish goes here ....

To use this in your CSS script, we could do something like:

.names {
font-weight: 800;
font-decoration: underline;
font-size: 1.2em;
}

#tom {
color: blue;
}

#dick {
color: green;
}

#harry {
color: magenta;
}

And you can combine them like so:
#tom.names {
font-style: italic;
}

.names#tom {
font-style: oblique;
}

In the case of the last two tags where we combined the ID and CLASS attributes, both are identical, and the order of the tags does not matter. You can have the ID first or the CLASS first, it is the same and has the same weight in CSS.

In this case since ".names#tom" is last in the script, the font-style rendered on the page will have the oblique font-style, thanks to the CSS cascade.

As long as we're talking about combining tags, you can have more than one class attribute in a single tag. Let's take a look at how this is done:

... something goes here ...

All the class names above are valid class names.

Let's take a closer look. You can have as many class names as you want in between the class quotes. Each class name is separated by a space, not a comma. The order the class names are in does not matter. The classes "names fudge" is the same as "fudge names" in the eyes of CSS.

Here's an example where we use the same styling as in our first example, using classes instead of the id's in the first example. The styling on the web page will be the same as in the first example.

.names {
font-weight: 800;
font-decoration: underline;
font-size: 1.2em;
}

.tom {
color: blue;
}

.dick {
color: green;
}

.harry {
color: magenta;
}

And you can combine them like so:
.tom.names {
font-style: italic;
}

.names.tom {
font-style: oblique;
}

The order of the names does not matter. The result will be an oblique font-style for .tom.names because of the CSS cascade. Also you can push the CSS name together, and don't need a space to separate them in the CSS tag.

One final note, for the few of you that still use IE6. IE6 does not do multiclassing. If you have CSS tags like ".names.tom", it will only see the last class name ".tom". You can still use each class in separate tags though, so ".names" works as a stand alone CSS tag.

Gee, I hope if your reading this post, none of you are using IE6, in fact I hope none of you are using any IE for your web development. If so, I'd like to suggest you might be a tad behind the technical power curve. Until next time...

Comments are closed.