Defining Tag Styles

Most of what was said previously about Class style rules is also true for Tag style rules, so make sure that you're familiar with that material before reading on here. Where as class rules are applied to any element that has the given class applied to it, tag rules actually redefine the appearance of the built in HTML tags. This is good practice if you do not want the browser to apply its own default styles to the tags.

Creating a New Tag Style Rule

As before, click on the New CSS Rule button and you will see the dialog. Note the settings in this example:

Tag Style

The Selector Type is set to Tag this time. When this is done the Name box changes to Tag. Now you cannot enter your own choice of name, instead you must specify the name of an existing HTML tag. In this case, I have chosen h1 for a level 1 heading. Finally, for the Define in choice, because this is a worked example, I have chosen this document only so that it does not affect the other pages in this site. Under most circumstances, I would actually chose to put the definition into a style sheet so that it could be used anywhere.

Defining the Style Rule

The method of defining the elements of the style are exactly the same as previously discussed. Suppose I made some choices about font family, size and style. This might give us the following rule which would make the main heading of this appear differently to the rest of the website.

h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 220%;
    font-style: italic;

Do you notice the slight difference between this Tag style rule and the previous Class style rules? Look at the name. The name of the Tag rule does not start with a "." whilst the names of all the Class rules do.

If I then went on to define rules for the level 2 and 3 heading styles and also for the paragraph tag, I could end up with a very different page look,as you see here. Switch to code view and take a look at the style definitions for those tags in the head of this page.

The real power of this approach is that if I decided that I liked this look, I could move the style rules into the main style sheet and the appearance of the whole website would change.

The next page discusses how ID style rules can be used... Next