| The Web is nothing without links. Many designers are content to rely on default browser styles being applied to their links, but not only is this boring, the defaults can often make all the links on your page look exactly the same whether they are global navigation or content links. In this example (Figure 21.6), we will be adding styles to the default.css file (Code 21.3) that is being linked to our structured HTML code shown in Code 21.2 to give link styles for link tags in the content (in a paragraph) and in the navigation. Figure 21.6. The navigation menu includes a rollover, while standard hypertext links in the page are given a light red, dotted underline when the page loads. The underline becomes a darker red line when the mouse cursor passes over it. 
To style navigation and links: 1. | p a {…}
In the default.css file, add a contextual selector rule for the anchor tag if it is within the paragraph tag, and then set the different link states: :link, :visited, :hover, and :active (Code 21.6). For more information on links and dynamic pseudo-classes, see "Working with Pseudo-Classes" in Chapter 2.
Code 21.6. default.css Add this code to style the navigation defined in Code 21.2.| [View full width] p a { color: #f33; text-decoration: none; padding-bottom: 0px; } p a:link { color: #f33; border-bottom: 2px dotted #fcc; } p a:visited { color:#966; border-bottom: 2px dotted #fcc; } p a:hover { color: #f00; border-bottom: 2px solid #f99; } p a:active { color: #966; border-bottom: 2px double #f66; } #navigation ol { list-style-type: none; margin: 0px; padding: 0px; } #navigation ol li { margin: 0px; margin-bottom: 0px; padding-bottom: 0px; } #navigation a { padding: 2px 2px 8px 16px; border-top: 3px solid #fff; text-decoration: none; display: block; } #navigation a:link { color: red; } #navigation a:visited { color: red; } #navigation a:hover { background-color: #fff; border-top: 3px solid #666; color: red; } #navigation a:active { background-color: red; border-top: 3px solid #fff; color: #fff; } #chapter01 #ch01, #chapter02 #ch02, #chapter03 #ch03, #chapter04 #ch04, #chapter05 #ch05,  #chapter06 #ch06, #chapter07 #ch07, #chapter08 #ch08, #chapter09 #ch09, #chapter10 #ch10, #chapter11 #ch11, #chapter12 #ch12 { background-color: #333; color: #fff; border-top: 3px solid #000; }
|
In this example, I've prevented links from using the underline by setting text-decoration: none. However, I'm using border-bottom: 2px dotted #f99 to reinstate a link "underline" that can control the style in all four link states, unlike a true underline style. This gives a much more dynamic and visually appealing look to the links.
| | | 2. | #navigation ol {…}
Notice in Code 21.2 that the navigation links are set up in a list. This is to allow the links to appear in a list even if there is no CSS (remember progressive enhancements?). However, notice that I also set the margin and padding of #navigation ol to 0 so that the numbers don't display and the links are flush to the left.
| 3. | #navigation a {…}
Set up the styles for your navigation links, and variations for all four link-states.
In this example, I've set the links to have a light white line above them and to then turn the background white when the visitor's mouse curses over them, creating a nice rollover effect.
| 4. | #chapter01 #ch01 {…}
When I was setting up the structure of the HTML page earlier in this chapter, I mentioned that adding the surrounding <div> element around the entire page was going to come in handy later with our navigation. Here is where it helps: Because each link is identified and the page is identified, we can set a special style to be used only if the link is within a specific page with that page's unique ID. The upshot is that the global navigation will automatically highlight the page it is on without additional coding from us.
The downside is that you have to include this contextual selector grouping for every link in your global navigation.
|
 Tip
|
