Cascading Style Sheets

Classes

A Motivational Example | Redefining The Tags | Including CSS Rules | Customizing Other Tags | Customizing Tags | Classes

So far we've only looked at using css rules to customize HTML tags. We've used rules to create new default versions of tags and to modify tag behavior on a case-by-case basis. But, in fact, we can do more than that with style sheets. CSS also lets us define classes. On the one hand, these can be used to customize existing tags on a "intermediate" basis (providing a middle ground between the approaches we've seen thus far that either alter all occurrences or only a single instance of a tag). But classes can also be used in such a way that we can, effectively, define our own "HTML environments".

A rule for a class is similar in form to the ones we've already seen for tags. The only difference is that the rule doesn't begin with the name of an HTML tag. Instead it begins with a period followed immediately by a name of our own choosing. The period identifies this as a rule for a class, not a tag; the name after the period is whatever we choose as the name for the new class we are creating.

Now let's look at some examples of classes and how they can be used.

Using a Class to Modify an HTML Tag

Although a class is an entity that we create, not an HTML tag, a class can be used to reconfigure a tag. In fact, the only way to make use of a class is to refer to it in an HTML tag. This is done by specifying the value of a new attribute of the tag we want to change. The attribute is named class; it can be an attribute of any HTML tag that can be reconfigured with css.

As a simple example, let's define the following two classes:

Now, let's use the classes to make some alternate versions of the <h3> tags: Example 9. The example HTML file uses the new classes in the statements:

Note that we don't include the period when we assign the class name to the class attribute in the HTML tag.

We now have at our disposal three different versions of the <h3> tag: 1) a version that's used if we specify class="blueslant", 2) a version that's used if we specify class="orangeline", and 3) the default version that's used if don't specify a class (in the present case, the new default that we created when we reconfigured the tag with a css rule for h3). If we place all three of these rules in an external file, we can use any of the definitons on any HTML page linked to to the external file.

This was a very simple example, but we can similarly use classes to define alternate versions of other tags.

Classes and IDs

Cascading style sheets also allow you to create a rule for an ID. The format of a rule for an ID is the same as for a class except that the ID name at the beginning of the rule must be preceded by a pound character # instead of by a period. To use an ID rule, the ID name must be referred to in an HTML tag; the ID name is assigned as a value of the ID attribute of a tag.

In many ways, classes and IDs work alike. In fact, here's our previous example modified to use IDs instead of classes: Example 10. The major difference is that a given ID is often used only once on any single HTML page. In this way, each tag can be "tagged with an identity". This can be useful when implementing some of the more advanced features of css, for example to control the positioning of elements on a page.

Creating Custom HTML Environments

These can be created with the DIV and SPAN tags. Actually, DIV and SPAN are just two more HTML tags, and classes and IDs are specified with them just as with any other tag. But because of the special nature of these two tags, they provide us with a way to define and implement our own HTML environments. For instance, you might want to use span to create a custom look for emphasizing a section of text: Example 11.

The DIV tag is almost a blank slate: it doesn't have any visible effect except to mark off a rectangular area of a page and put a blank line before and after it. SPAN is a complete tabula rasa and has absolutely no formatting characteristics of its own. Classes and IDs only take effect when they are applied to an HTML tag; because of the "blankness" of DIV and SPAN, you can think of these two tags as empty containers that let you bring in a customized set of definitions whenever you want.

This is not to say that these tags don't already have a set of default attributes that you can specify. In fact, they do, including attributes that allow you to control the exact positioning on a page and the "visibility properties" of items contained inside DIV and SPAN tags. These attributes, when integrated with Javascript, make it possible to create animations and produce truly dynamic HTML elements on a page. But these topics can be considerably more complicated than what we've described for css here.