Which Rule Wins?
When we added the grouped declaration for the headings, we changed some styles that we’d set previously. A look at the source shows that the level two heading, h2, has been set to be blue and white in different places in our style sheet:
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
…
h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
Because the declaration specifying that the h2 should be white comes later, it has overridden the earlier one. It doesn’t matter if you’ve defined an h2 to be blue 100 times through your style sheet; if the last definition says it should be white, then white it will be!
Recapping Our Progress
Time for another breather. What have we learned? Well, we’ve learned some more styles that you can apply in CSS, we’ve seen how you can style certain elements depending on their context, and more recently, we’ve discussed how you can group elements that need to be styled in the same way. There’s one thing that we’ve touched on only briefly, yet it demands more attention because it’s so fundamental to the way the Web functions. That topic is links.
Styling Links
Links are everywhere on the Web: they truly are the basis of everything you see online. Nowadays, we’re used to seeing highly decorative web pages adorned by a wealth of different images and features. Take a step back in time, though, and you’ll find that the World Wide Web was little more than a collection of linked documents. Go back to the earliest browsers and you’ll see that those links were underlined, which remains the case today. By default, a browser uses the following color scheme for links:
- blue: an unvisited link
- purple: a link to a web page that you’ve previously visited
- red: an active link (one you’re clicking on; you may have noticed links flash red momentarily when you initially click on them)
This color scheme isn’t to everyone’s taste, but it’s what we’re stuck with for now. At least, it’s what we would be stuck with if we couldn’t use CSS to redefine those colors.
At its most basic, a CSS style for links might look like this:
a {
font-weight: bold;
color: black;
}
Now, instead of being blue and having a normal font weight, your links appear in bold, black type. Try adding that to your style1.css file, then save it and see how it affects your web pages — Figure 3.13, “Styling all the links in our navigation to bold and black” illustrates this.
Link States
As I mentioned previously, there are different types of links (unvisited, visited, active) that you’ll come across on a web page. There’s one other state that I haven’t mentioned, but it’s one with which you’re probably familiar: the hover state (which occurs when you pass your cursor over the link). In CSS, you can change the styling of all these link states using pseudo-classes, which sounds complicated but really is fairly straightforward. You can think of a pseudo-class as being like an internal class the browser automatically applies to the link while it’s in a certain state. Here is some CSS that shows the color/style scheme for the different link states:
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
The different states are addressed within the CSS through the use of the a element selector, and by adding a colon (:) and the pseudo-classes link, visited, hover, and active. Adding pseudo-classes to your style sheet means the browser applies the rule when the element is in the state specified by the pseudo-class.
Tip: Getting Your Link States in Order
Browsers usually aren’t fussy about the order in which you specify rules in your CSS file, but links should always be specified in the order shown above: link, visited, hover, and active. Try to remember the letters LVHA. The more cynical users might find it easier to remember this mnemonic with the phrase, “Love? Ha!” We can thank Jeffrey Zeldman for that little gem. (Designing With Web Standards, Jeffrey Zeldman, New Riders.)
Let’s change the styles for different link states in our project site:
- Open the project site’s CSS file (
style1.css), and add the above CSS at the bottom of the file. - Save the CSS file.
- Open any of the three web pages in your browser (or hit Reload) to see how the styled links display.
The figure below shows the three different link states: the home link is unvisited, the link to the About Us page shows that it has been visited previously (shown in gray), and the link to the Contact Us page is being hovered over by the user’s cursor.
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.
Tip: 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 under Browsing History that reads Delete. Click on this and it will bring up a Delete Browsing History dialog with more options, as shown in Figure 3.15, “Clearing the history in IE displays unvisited link styles again”; make sure that the History checkbox has been ticked, then click the Delete button on that dialog. Afterwards, reload the web page. Any links you may have visited will now appear as unvisited. (The process for clearing history in older versions is a little easier — just look for the button on the Internet Options dialogue that says Clear History).
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.
Ian Lloyd
