Defining ID and Pseudo-Class Styles

We have seen on previous pages how Dreamweaver lets us define class styles and tag styles to control the appearance of page elements. However, there are also ID styles and pseudo-class styles to consider.

ID Styles

An ID style is very similar to a class style. In fact, the only real difference is in the application of the rule. In a page, any number of elements may have the same class. However, only one element should have any given ID. That is, an ID should be unique in each page.

As we have seen, the selector name for a class rule starts with a dot (.). In contrast, the selector name for an ID rule starts with a hash (#) symbol. Apart from this, ID style rules are essential the same as those previously discussed.

For example, this page is made up from many different div elements, but only one of those has the ID footer. There is a rule defining how the footer should look in the main style sheet for the site, ensuring that every footer div has the same appearance. However, it is possible to override that by defining an additional rule, local to this page:

    #footer {
        font-family: "Comic Sans MS", cursive;
        font-weight: bold;
        color: #F00;
        border-top-width: thick;
        border-top-style: double;
        border-top-color: #F00;
    }

The "#" tells us that this is an ID rule, and that it applies to the element with the ID footer. The rest of the rule is exactly the same as a class rule. Check out the footer element below to see the effect.

So, if you understand how the style works for a class rule, then an ID rule is the same. The only difference is how the HTML element to receive the style is found in the page.

Pseudo-Class Styles

A pseudo-class is a particular type of selector that modifies an existing selector. The most common example used is that of links. So, for example, a style rule with the selector of a would apply to all anchor (link) elements in a page. On the other hand, a style rule with the selector a:hover would apply to an anchor only when the mouse was hovering over it. Similarly, a style rule with the selector a:visited would apply only to an anchor element that has been visited.

Consider the following set of rules and study the visual behaviour of links on this page:

a {
    color: #F00;
    text-decoration: none;
}

a:visited {
    color: #309;
}

a:hover {
    text-decoration: underline;
}

The first rule defines the general appearance of the a element, specifying a colour and text decoration. This is a tag rule, as previously discussed. The second rule defines a change of colour that is to be applied if the link has been visited. The third rule defines a change of text decoration, adding an underline, which is to be applied when ever the mouse is hovering over the link. The second and third rules use pseudo-class selectors, note the syntax. Note that the order of these rules is important!

There are a great many pseudo-classes that can be applied to elements. Some are specific to a particular tag (such as the link example discussed above) and some can be used in almost any situation.

Check out the W3Schools page for a complete list of the available pseudo-class selectors, along with some good examples of how they are used.

The next page discusses how selectors can be combined... Next