Feel free to experiment in the CSS file with the different foreground and background colors, and other text formatting styles that were detailed in the table earlier in this chapter.
Note: Clearing your History
Your browser automatically stores a certain amount of your browsing history, and uses this information to decide whether a link has been visited or not (and, hence, how the link should be displayed). If you're building a site and testing links, you might want to check how an unvisited link looks but, because of your browsing history, they may all show as having been visited. This is almost certainly the case with our three-page project site -- the links in your navigation list are probably all gray. To reset this, you can clear your browser's history. In IE, select Tools > Internet Options. You'll see a button that reads Clear History, as shown in Figure 3.15; click it, then reload the web page. Any links you may have visited will now appear as unvisited.
Figure 3.15. Clearing the history in IE displays unvisited link styles again
Other browsers have similar options, which may be found in locations such as Tools > Options or Preferences > Privacy. I won't list all the different methods for deleting your history from various browsers here, but if you rummage around, you should be able to find them without too much difficulty.
Class Selectors
To date, we've discussed the ways in which we can style various elements, such as paragraphs and headings; we've also seen how we can style elements in specific areas of the page using the id attribute. However, implementing broad-brush styles, such as coloring the text in all p elements navy, is very much a blanket approach to design. What if you want some of those paragraphs (or any elements, for that matter) to look a little different than the rest? Class selectors are the answer.
A class selector lets you define a style that can be used over and over again to style many different elements. So, for example, let's say you wanted to make some parts of your text stand out -- to make them look slightly more appealing or fun than other parts of the document. You could do so in your CSS like this:
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
Here, we've created a style rule for a class called "fun." The fact that it's a class selector is denoted by the period at the beginning of the class name. We've slipped another property into this rule: letter-spacing defines the space between each of the letters. We've set a spacing of 0.05em here. 1em is the height of the M character in any font, so 0.05em is 5% of that height. It doesn't sound like much of a difference, but when it comes to typography, subtle changes are usually more effective than extreme ones.
In order to make use of the style, all you need to do is add the class="fun" attribute to an element:
<p class="fun">A man walks into a bar; you would've thought he'd
see it coming!</p>
Share and Enjoy:
