As discussed in 04-Selectors, you can override the pre-existing properties of HTML tags using any of the selector types. Probably the most used selector type is the class selector, so this deserves a little closer look.

Pre-existing Properties Before you can apply new formatting to an existing tag, you need to know what the tag does. Decide which properties you want to keep and which you want to change. Using a previous example, let's look at the tag. It renders the text in boldface type using the default font face, color, and size. If you want to change all the bold tags in your document you can use the element selector like this:



But suppose you want to use the default bold throughout most of your document, and have it appear red in only a few places? You could apply the style attribute to only those tags you want to appear red. Like this:



But again, you would be limiting the benefit of CSS if you included this in several places throughout your document. You might do it, if you're using different colors in each tag, but suppose you've done it to match your Study. When you decide to change your color scheme, you would have to change each tag again. You can get around this by defining any additional or changed properties in a class selector.

Choosing a class name. To begin defining your class selector, choose a name. We'll call ours "mybold". We could have as easily called it "b42" or "lovely", but since you'll probably be defining lots of these, it's a good idea to make it something that reminds you of what it does. In addition, we could have called it "redbold", but what if you change the color later (as we intend to do)? It would still work, but "redbold" if the color is now purple would be confusing to future designers who might be editing your webpage (or in the case of AW, who might be helping you troubleshoot a problem).

Defining the rule.In your stylesheet, type a period (.) and the word "mybold" followed by a space. Open your class with a left curly brace ({) and add your declarations. End with a semi-colon (optional in this rule), and then don't forget to close your class rule with a right curly brace (}). Like this:


Applying the rule. Now you have a class rule. But unlike element selectors that automatically apply the new rule to the HTML tags you redefined, you have to tell HTML to use class selectors. So, when you're ready to use the rule inside your document, add it to the HTML tag using the class= attribute. Like this:



Now, if you decide to change the color to purple, you only have to change it in your class rule and it will affect all the bold tags to which you originally applied it.



Applying multiple classes. There are two different ways to apply more than one class to an element. As always in these tutorials, we'll use a very simplified example. Let's say you have a class for centering elements (text, tables, images) and another class for creating a box around elements (like the box used to surround our examples). Like this:


Now, let's say you want the first paragraph in your gram to be left aligned (the default) but the second item should be centered. You can apply the gram rule to the entire block and the cntr rule only to the second item. Like this:


This would give us:


Notice the second div (cntr) is opened immediately before and closed immediately after the image tag. This insures that only the image will be centered. If you wanted to center everything, you could open the border with a div tag and the centering with a span tag...or use two divs, one after the other, and then close both at the end. But CSS provides a short cut. If you want to apply more than one class to an element, simply list them inside the class= attribute, leaving a space between them. Like this:


That will give you this:



Either would work, but the second method give you cleaner code. Such shorthand methods are nice to have when your code starts getting longer and longer!