style classes

IMPORTANT: as the lecture tried to make clear, this is not a technique only applicable to tables. Our discussion of tables merely gives an opportunity to introduce it. Classes are not that difficult but you had enough to occupy you in lecture 2 already! We need them now, though, for as the page on more complex table techniques observed, there are too many things to be done with tables to always have the same style applying to the same tag, and ad hoc styles are cumbersome. Classes are the answer, but please be aware that you can use this technique with any aspect of your HTML and CSS.

There will be many occasions where you want to vary the appearance of individual text elements, whether these be paragraphs you want to right- or center-align, passages of text you want to render in a different colour for emphasis, or other similar effects. The techniques we've discussed so far will do just fine for defining every occurrence of a tag, and ad hoc styles work well for one-off changes. But what about situations between these two poles?

For example, you might have noticed that at the bottom of all these pages is a copyright statement, which I'll repeat here to save you scrolling:

Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.

Clearly, the text is smaller than the main text of these pages. However, that line is still enclosed in <p> and </p> tags. I have not appropriated some other tag for this purpose. Instead, what I've done is define what is known as a class.

Classes are "subdivisions" of general tag definitions. They are defined in the style sheet (internal or external) using a dot after the name of the element you are altering, followed by whatever you wish to call that class, and then the style definition for that class. So, in the case above, I want that particular paragraph to appear smaller than the main text. I have therefore created a style sheet definition which looks like this:

p.notes { font-size: 70%; }

To "call" this class I need to use an attribute called, predictably enough, class. The value of this attribute is the name of the class (you do not need hashmarks or anything like that). In the example (truncated for clarity):

<p class="notes">Material on this site... </p>

Here is a more involved example:

h3.highlight { border-style: solid;
              border-width: 2px;
              background-color: #ffffff;
              padding: 5px;
              font-family: Times, serif;
              font-size: 14pt; }

which gives you a paragraph like this. It is bounded between <h3 class="highlight"> and </h3> tags.

Class defintions inherit properties off their main tag definition. The <h3> class definition says nothing about the font color, for example, so this remains as it does for "ordinary"<h3> tags. The <p> class "notes" changes only the text size: everything else remains the same.

Partly because of this you should make sure you always define these classes at the end of the style sheet. Get all the standard tag definitions done first, then do your pseudo-classes for the <a> tag, then these.

Note that it is possible to define classes which are not related to a specific tag type. You do this by simply omitting any tag name from the style sheet but retaining the full stop (.) and the class name. For instance, you might have an entry in the style sheet such as:

.gold { background-color: #cd7f32; }

...and this can now be applied to any tag type by including the class="gold" attribute within it. Have a look at this table:

...and its code:

<table style="width: 75%">
    <tr>
        <td><p>Normal</p></td>
        <td class="gold"><p>Gold</p></td>
        <td><p>Normal</p></td>
    </tr>
</table>

Hopefully you also remember the example in the lecture with the 2 × 2 table used to lay out a page, using three different shades of blue as background colours. The page on whole page layout has further examples. Like everything else in web design, the best way to work these out is to practice! Try defining classes in your own style sheets, and seeing how they work. In the end, there is no right and wrong time to use them, but eventually you will want to break free of the "one style per tag" restriction of basic CSS, and classes are the most sophisticated way of doing this. Remember also the <div> (block-level) and <span> (inline) tags which have no intrinsic formatting of their own but are good at applying styles when combined with the class or style attributes.

Back to the top

Back to the menu for lesson 4