CSS Tips and Tricks

Although you've covered some interesting new style sheet territory in this hour already, there are still a few unique CSS features you've yet to uncover. The next few sections tie up some CSS loose ends by introducing you to some very handy CSS techniques.

Using Generic Classes

Every CSS style rule you've seen thus far in the book relies on a base tag when you put together the selector portion of the rule. For example, if you wanted to create a paragraph of text that is shown in bold, you would use the following style rule:

 p.bold { font-weight:bold; } 

Notice in this example that the p element is provided on the left side of the period in the rule. If you want to create a style rule that can be applied to any element, you can leave off the left side of the selector and create a generic style class. A generic style class can be applied to any element that supports the properties within the style rule. Following is an example of creating a generic bold style class:

 .bold { font-weight:bold; } 

This generic style class is like the one you just saw except that the p part of the selector has been removed. This means you can now use the class with any element that supports the font-weight property. Following is an example:

 <p >   This paragraph is bold. </p> <p>   This <span >word</span> is bold. </p> 

In this example, the first paragraph is bold due to the bold setting in the class attribute. However, the second paragraph is normal except for the <span> tag, which also uses the bold setting in the class attribute. Because the bold style class is a generic style class, it can be used with both the <p> and the <span> tags, among others.

Specifying Multiple Selectors

Another neat trick you can perform when creating style rules is to specify multiple selectors for a single rule. This effectively allows you to tighten up your style sheet code and eliminate unnecessary repeated code. Check out the following example:

 a:link, a:visited, a:active {   color:#19619A;   font-weight:bold;   text-decoration:none; } 

In this example, the a:link, a:visited, and a:active style classes are all set to the same rule. Without the multiple selector trick, you'd have to repeat the rule three times, which is an unnecessary hassle.

Here's one more example just to make sure that you understand how to use multiple selectors:

 h1, h2 { text-align:center; font-style:italic; } 

In this code, both the h1 and the h2 elements are styled so that text within them is center aligned and italicized. By using a multiple selector, you simplify the style sheet code and make it easier to maintain it. In other words, should you ever need to change the style rule for the h1 and H2 elements, all you have to do is edit a single rule.

Mixing Style Classes

One final style sheet trick that certainly ranks up there in terms of craftiness involves the use of mixed style classes. More specifically, you can create a custom style class for a particular element that also applies to pseudoclasses. If you recall, pseudoclasses are built-in classes that relate to the state of an element, such as a:link and a:hover. Maybe you want to create several types of links in your web pages, in which case it may make sense to create multiple link style classes.

To understand how you might use mixed style classes, check out the following code:

 a:link, a:visited, a:active {   color:#19619A;   font-weight:bold;   text-decoration:none; } a:hover {   background-color:gold;   font-weight:bold;   text-decoration:none; } 

This code should look somewhat familiar, because it combines some of the link styles you've already learned about. If you pay close attention, you'll notice that these style classes result in a link being displayed in a bold font with no underline. What if you wanted a link that was similar but that used italicized text instead of bold text? Here's the code:

 a.emphasis:link, a.emphasis:visited, a.emphasis:active {   color:#19619A;   font-style:italic;   text-decoration:none; } a.emphasis:hover {   background-color:gold;   font-style:italic;   text-decoration:none; } 

A hyperlink set to the emphasis class will be displayed in italicized text instead of bold text.