Link Effects, Lists, and Navigation--tutorial.jcwcn.com

With CSS, you can create beautiful effects for links, including hover effects that, before CSS, had to be managed with JavaScript and numerous images or with a Java applet. Using color and images, you can reproduce the effects that demanded so many resources with much greater efficiency and control, and no reliance on anything but clean markup and savvy styling, resulting in beautiful designs that degrade well in older browsers and are completely accessible to those with disabilities.
In this tutorial, you begin by creating simple styles for links and then progress to multiple link styles. You'll then learn to manage lists with CSS. Finally, you'll work with lists and links for both vertical and horizontal navigation. Along the way, you'll be introduced to new CSS properties, as well as a number of selector types you've not worked with just yet.

As you learned in tutorial 2, "Adding Text and Links," the link is really what empowered the Web as a medium. The capability to move from page to page and site to site based on choice created the opportunity for websites to get noticed, which, in turn, allowed the Web to grow so quickly.

CSS has been used to style links for as long as CSS has been available. In fact, along with text styles, link styles are by far the most common use of CSS to date. Of course, as we learn more about CSS and how to use it as a means of managing most, if not all, of our visual presentation, that truth becomes somewhat diluted. At this point, though, styling links with CSS remains one of the most widespread applications of the technology.

Lists help you organize your content, and with CSS, you can do a great deal with lists. Along with styling the way list text is managed, you can use CSS to change the way the numbers or bullets are displayed, replace them with an image, or remove the list markers completely.

A very exciting opportunity comes about when you merge lists and links. You end up with a means of navigation. For, after all, what is navigation other than a list of links? Whether managed vertically in a side column or horizontally along the top of the page, using CSS, lists and links can be manipulated to create very richly featured navigation with a minimum of fuss.

In this tutorial, you begin by creating simple styles for links and then progress to multiple link styles. You'll then learn to manage lists with CSS. Finally, you'll work with lists and links for both vertical and horizontal navigation. Along the way, you'll be introduced to new CSS properties, as well as a number of selector types you've not worked with just yet.

First things first! Several states for links are considered standard for all browsers:

link The link state is the state of the link before being activated.
visited The visited state occurs after the link has been visited.
hover Hovering is the state of the link as you hover the mouse pointer over the link.
active The active state occurs as you are clicking on the link to activate it.

NOTE

There is another state, focus. This is used whenever an element is capable of receiving keyboard input, such as with a form. This is not typically used with links, but it's good to be aware of.

CSS categorizes the link and visited states as pseudo classes, and the hover and active states as dynamic pseudo classes. You can see how hover and active are dynamic: They require some kind of action from the user to work. The link and visited states occur before and after interaction.

You might also remember from the discussion in tutorial 9, "Styling Text," the pseudo element selectors :first-child and :first-line. All pseudo selectors take the preceding colon. So, the corresponding selectors available to style links are :link, :visited, :hover, and :active.

Example 10-1 sets up some general styles for the document, as well as styles for all link states.

Example 10-1. Styling links using pseudo class and dynamic pseudo class selectors

[View full width]

body {font: 14px Georgia, Times, serif; color: white; background-color: black;}
h1 {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc; background-color: black;
 text-transform: lowercase;} 
a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}

You'll notice that I've styled the anchor element, too. Because the a is an element selector, you can use it to set defaults that will then be inherited. Pseudo classes are not inherited, for logical reasons: The whole point is to be able to make changes in each state. However, there will be commonalities, so those common styles can be set in the anchor, with the independent styles in the selectors for each state.

Figure 10-1 shows the document to which I've applied these styles. You'll notice my cursor hovering over a link so you can visualize the change.

Figure 10-1. Viewing `link` and `hover` states in the context of a document.

[View full size image]

NOTE

For link effects to work properly, they must appear in this order: link, visited, hover, active. Any other order will cause inconsistent behavior. Just remember the order of LVHA, or, as a popular mnemonic in the industry goes, LoVe/HAte.

I enlarged the link text to demonstrate more clearly the appearance of each state (see Figure 10-2).

Figure 10-2. Link, visited, hover, and active states.

You might not be able to see the color until you try it out in a browser, but you will notice the changesespecially note the marquee surrounding the activated link.

Simple, wasn't that? You'll dig a little deeper now and make some changes to the way your links look. Typically, most modifications are made for the hover state, but you can style for all states.

A popular approach is to add a background color on hover (see Example 10-2).

Example 10-2. Adding a background color to the hover state

a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; background-color: white;}
a:active {color: red;}

As the mouse passes over the link, the background turns white (see Figure 10-3).

Figure 10-3. Changing the background color in a `hover` state.

You can also modify the text weight by making it bold, or change its style and make it italic (see Example 10-3).

Example 10-3. Adding a background color to the hover state

a {color: orange;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; font-style: italic;}
a:active {color: red;}

NOTE

Many usability specialists suggest avoiding major changes in link state styles because they feel it's disconcerting. Some very rigid usability experts advocate not even styling links and leaving them with their default colors and underlines. Most designers do not agree with the more rigid approach, though, and prefer to use link styles to enhance their design work. The main concern is ensuring that there's some way for a visitor to know that the link is, in fact, a link.

As the mouse passes over the link, the background turns italic (see Figure 10-4).

Figure 10-4. Modifying the text style to italic in the `hover` state.

Perhaps the most popular modification is removing the link underline. You can do this for all states with the text-decoration: none; declaration:

a {color: orange; text-decoration: none;}

As I mentioned, common styles to all states should be placed in the anchor element so you can tap into inheritance. There's no need to add this declaration to any of the pseudo selectors because they'll inherit the rule (see Figure 10-5).

Figure 10-5. Look, Mano underlines!

You can mix and match rules, too. Some designers like to have the underline appear only in the hover state. To do that, you simply add the text-decoration: underline; declaration to the :hover selector, which overrides the inherited value in the anchor because of the specificity of the selectors (see tutorial 7, "Using CSS," for more details on specificity). Figure 10-6 shows the links without underlines until the hover state is activated.

Figure 10-6. The `link`, `visited`, `hover`, and `active` states, with underlining in the `hover` state.

Another fantastic option made available via CSS is the capability to have more than one style of links per document. This is especially helpful when you have areas on a page with distinctly different features than other areas of the page. A perfect example is a navigation area with a blue background, and a content area with a white background. If you wanted white links on the blue background, it clearly couldn't work within the white content because the links would be invisible.

You can approach multiple link styles in a few ways, including creating separate classes. You could have basic link styles for the default and content areas, and you could set up a special class for the navigation area (see Example 10-4).

Example 10-4. Using classes to create multiple link styles

/* default link styles, appropriate for content area */
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}

/* classed link styles, appropriate for navigation area */
a.nav {color: white; text-decoration: none;}
a.nav:link {color: white;}
a.nav:visited {color: yellow;}
a.nav:hover {color: orange;}
a.nav:active {color: fuschia;}

You would then apply the class="nav" attribute within those links that you'd like to apply the class to:

<a class="nav" href="http://www.molly.com/">Molly.Com</a>

I've created an HTML file with two sections to represent content and navigation areas, and applied the class to the link in the navigation area (see Figure 10-7).

Figure 10-7. Applying multiple link styles using classes.

Of course, using a lot of classes means not only writing more CSS rules, but also adding numerous class attributes to the HTML. If you have a lot of content to style and you rely too much on classes, it'll result in what industry specialists refer to as "class-it is," the overuse of classes. You can avoid this by tapping into other kinds of selectors.

Elements can be uniquely identified using what's known as an ID selector. These selectors start off with an octothorpe followed by a custom namevery similar to what you do when creating a class:

#id-name

NOTE

The difference between class and ID selectors is a critical one. Class selectors can be used as many times in a document as you desire, whereas an ID can be used only once per document. Therefore, IDs are particularly useful when identifying unique divisions of a document, such as navigation, content, masthead, and footer. You'll see this at work a great deal in upcoming tutorials, particularly when we get into CSS layouts.

After a division is identified, you can tap into descendant selectors. These are selectors that select based on the defined parent element. First you use the selector for the parent, then a space, and then the element you want to pass the styles along to: #nav a. This declaration selects any child anchor of the parent element identified as nav. Example 10-5 shows this at work in the context of multiple linking.

Example 10-5. Multiple links using ID and descendant selectors

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: white; background-color: black;}
h1 {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;}
h2 {font: italic 20px Georgia, Times, serif; color: #ccc; background-color: black;
 text-transform: lowercase;}
/* link defaults */
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; text-decoration: underline;}
a:active {color: red;}
/* link styles for all descendant links of the example2 division */
#example2 {background-color: white; color: black;}
#example2 a {color: lime;}
#example2 a:link {color: lime;}
#example2 a:visited {color: red;}
#example2 a:hover {color: aqua; text-decoration: underline;}
#example2 a:active {color: fuchsia;}
</style>
</head>
<body>
<div id="example1">
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my
 own. Observing my partiality for domestic pets, she lost no opportunity of procuring those
 of the <a href="http://www.prenhall.com/">most</a> agreeable kind. We had birds, gold fish
, a fine dog, rabbits, a small monkey, and a cat.</p>
</div>
<div id="example2">
<p>This latter was a <a href="http://wwwprenhall.com/">remarkably</a> large and beautiful
 animal, entirely black, and sagacious to an astonishing degree. In speaking of his
 intelligence, my wife, who at heart was not a little tinctured with superstition, made
 frequent allusion to the ancient popular notion, which regarded all black cats as witches
 in disguise. Not that she was ever serious upon this point - and I mention the matter at
 all for no better reason than that it happens, just now, to be remembered.</p>
</div>
</body>
</html>

In this case, two divisions have IDs. Because there are no link styles defined for the example1 division, those links will take the defaults. But because I've created link styles specifically for example2, those styles are then applied to all descendant links within that division (see Figure 10-8).

Figure 10-8. Applying multiple links using descendant selectors, which streamlines both the CSS and the markup by avoiding classitis.

[View full size image]

Moving on to lists, you'll begin by styling an ordered list. You'll modify the marker type and then replace the marker altogether with an image. I began with some text and background styles along with an unstyled ordered list, resulting in Figure 10-9.

Figure 10-9. A styled page with an ordered list.

If you want to use an alternate marker, you can do so using the list-style-type property with a corresponding value. There are numerous values (most supporting numerals in other languages), but the ones you'll likely want to swap in an ordered list are decimal-leading-zero (which starts the numbering at zero) and lower-roman or upper-roman (which use lower or upper Roman numerals, respectively). Simply add the value you want to the existing style sheet:

ol {list-style-type: lower-roman;}

This results in the numerals displaying in lowercase Roman (see Figure 10-10).

Figure 10-10. Styling the ordered list with lowercase Roman numerals.

If you'd like to replace the numerals with an image, create images for each number you require and apply classes to each list item to get the results (see Example 10-6).

Example 10-6. Using classes to apply images to the ordered list

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif);
 background-position: right top; background-repeat: no-repeat;}
h1 {font: 22px Arial, Helvetica, sans-serif; color: orange; text-decoration: underline;
 text-transform: capitalize;}
h2 {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;}
.list1 {list-style-image: url(1.gif);}
.list2 {list-style-image: url(2.gif);}
.list3 {list-style-image: url(3.gif);}
</style>
</head>
<body>
<h1>Directions to the Party!</h1>
<ol>
<li class="list1">From the corner of Broadway and 5th Avenue, take a right onto 5th.</li>
<li class="list2">Follow 5th North about three miles until you come to the Oak Road
 intersection.</li>
<li class="list3">Take a right on Oak Road. Stay on Oak about five miles.</li>
</ol>
</body>
</html>

You can see not only the relevant CSS here, but also see the rules I created for the rest of the page styles (see Figure 10-11).

Figure 10-11. Adding graphic numerals to the list using classes.

NOTE

You can also alter the position of ordered and unordered lists. You'll do that in the following section.

As with ordered lists, you can change the marker, replace it with an image, and modify the list marker's position in relation to the text.

Unordered list markers can be styled using one of three keywords: disc, circle, or square (see Example 10-7).

Example 10-7. Inline styles demonstrating the three marker keywords for unordered lists

<h2>What to Bring:</h2>
<ul>
<li style="list-style-type: disc;">A beverage of choice.</li>
<li style="list-style-type: circle;">Munchies.</li>
<li style="list-style-type: square;">Music and movies.</li>
</ul>

Figure 10-12 shows the shapely results.

Figure 10-12. Showing off the `disc`, `circle`, and `square` optionsnote that some browsers will use slightly different markers, but the general features are retained.

If you'd like to replace the marker with a custom image, create the image and add it using the list-style-image property (see Example 10-8).

Example 10-8. Viewing the complete document along with the image-based bullet

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif);
 background-position: right top; background-repeat: no-repeat;}
h1 {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;}
ul {list-style-image: url(bullet.gif);}
</style>
</head>
<body>
<h1>What to Bring:</h1>
<ul>
<li>A beverage of choice.</li>
<li>Munchies.</li>
<li>Music and movies.</li>
</ul>
</body>
</html>

No need for classes; there's only one image needed. This image will now replace the marker (see Figure 10-13).

Figure 10-13. Using images instead of text-based markers to customize your bullets.

Another list property you can use is the list-style-position property, with a value of either outside or inside. The outside value positions the marker outside the block, so when the line wraps, it indentstypical list behavior. Placing the marker inside results in no indent (see Figure 10-14).

Figure 10-14. The top option uses `outside` and the bottom `inside` for the list's position.

Another shorthand property is the list-style property. It takes properties from lists and enables you to author them in shorthand (see Example 10-9).

Example 10-9. Using the `list-style` shorthand property

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif);
 background-position: right top; background-repeat: no-repeat;}
h1 {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;} 
ul {list-style: url(arrow.gif) inside;}
</style>
</head>
<body>
<h1>What to Bring:</h1>
<ul>
<li>A beverage <br />of choice.</li>
<li>Munchies.</li>
<li>Music <br />and movies.</li>
</ul>
</body>
</html>

In this case, I've styled the ul element using an image and a position. You could swap the image for a keyword if you don't want to use an image. You'll notice that I purposely broke the lines so you can see the influence of the inside value (see Figure 10-15).

Figure 10-15. Styling the list using the `list-style` shorthand property.

Things begin to get really exciting when you combine links and lists for navigation. You'll begin here by first styling a simple list and getting rid of the bullets using the list-style-type property with a value of none. This removes the markers completely, leaving a list of links (see Example 10-10).

Example 10-10. Styling a list of links

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; text-decoration: underline;}  /* font-style: italic; font-weight:
 bold; background-color: aqua; */
a:active {color: red;}
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

Figure 10-16 shows the list of styled links with no markers.

Figure 10-16. Simple list-based vertical navigation with styled links.

Okay, so that's not so fancy. Hang on! It gets better. By using a range of styles, including border effects and padding (see tutorial 11, "Margins, Borders, and Padding"), you can add a lot to this simple navigation bar. You can also add background colors and images to make the list more visually interesting (see Example 10-11).

Example 10-11. Adding styles to the list

[View full width]

body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none; padding: 0; width: 100px; background-image: url(swirls.gif);
 border: 2px solid orange;}
li {padding-left: 5px; padding-bottom: 5px; border-bottom: 1px solid orange;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}

Okay, that's definitely getting a little more interesting (see Figure 10-17).

Figure 10-17. Looks like a navigation bar now.

NOTE

As you try out different styles with your navigation, you will find differences in the way browsers manage styling lists. Mozilla and Mozilla Firefox, for example, interpret padding and widths carefully, while IE tends to be more forgiving.

By tapping into background graphics and the :hover selector, you can create a navigation list that will have an attractive background for each list item. Add a contrasting background graphic to the hover state for impressive results (see Example 10-12).

Example 10-12. Using background images to create sophisticated navigation effects

body {font: bold 15px Georgia, Times, serif; color: black;}
a {color: white; text-decoration: none; display: block;}
a:link {color: white;}
a:visited {color: yellow;}
a:hover {color: white; background-image: url(linkhover.gif);}
a:active {color: red;}
#nav, #nav a, #nav li {width: 100px; margin: 0; padding: 0; list-style-type: none;}
li {background-image: url(linkback.gif); border-bottom: 3px solid white;}

You'll notice that I've set a background graphic for the list item, as well as a background graphic for the hover state. This results in a richly designed navigation bar with visually advanced effects (see Figure 10-18).

Figure 10-18. Adding background graphics to the list item and hover state to create graphically rich mouseover effects previously unattainable without JavaScript.

NOTE

I've changed the display of the anchor element from inline (in-text) to block (followed by a break). This is necessary to match the width of the anchor element to the width of the list item element so that the hover state's background graphic displays properly across all browsers.

In the last section, you used the display: block; property to turn the anchor element from an inline element to a block element. Using the display: inline; property, you can make lists operate inline, which means they'll display horizontally (see Example 10-13).

Example 10-13. Markup and CSS for a horizontal list navigation using color effects

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black; }
ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;}
#navlist li {display: inline; list-style-type: none;}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited {color: white;  background-color: orange;
 text-decoration: none;}
#navlist a:hover {color: orange; background-color: yellow; text-decoration: none;}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>

This results in a very nice horizontal navigation bar (see Figure 10-19).

Figure 10-19. Using a list and color effects to achieve horizontal list-based navigation.

Just as you could swap images in the background with vertical lists, you can do the same thing with horizontal lists. I made a few modifications to the previous style sheet: I added the link and hover state background images. Then I bolded the font and set its color to white for both the link and hover states, to allow for good contrast as the image is swapped upon mouseover (see Example 10-14).

Example 10-14. List navigation using background images

[View full width]

body {font: bold 14px Georgia, Times, serif; color: black; }
ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;}
#navlist li {display: inline; list-style-type: none;}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited {color: white;  background-image: url(linkback.gif);
 text-decoration: none;}
#navlist a:hover {color: white; background-image: url(linkhover.gif); text-decoration: none;}

Figure 10-20 shows the elegant navigation scheme.

Figure 10-20. List-based horizontal navigation using image swapping.

QUANTUM LEAP: HOVER AND INTERNET EXPLORER

As you work with lists for navigation, especially horizontal lists, you'll find that there are dramatic inconsistencies in the way that Internet Explorer deals with styles compared to Mozilla, Firefox, Opera, and Safari. Sadly, Internet Explorer hasn't been updated in years, and version 6.0 for Windows is missing significant support for CSS. As a result, you have to come up with savvy styles to ensure that your work looks good in the widest range of browsers possible (as those depicted here do).

One major issue with IE is the fact that it supports the :hover selector only for the anchor element, whereas all other browsers support it for any element. If this support were available in IE, there'd be less muss and fuss when dealing with list-based navigationnot to mention a wide range of additional options available for styling lists dynamically without using JavaScript. For other dynamic list navigation, such as drop-down or fly-out navigation that does not work in IE, see Eric Meyer's CSS Edge, at http://www.meyerweb.com/eric/css/edge/.

It's important to point out that the techniques in this tutorial, particularly the way lists are being used in navigation, are a relatively new concept in web design. The mere fact that CSS lets you change the display of an element makes it very compelling to rely as little on imagery for effects as possible.

NOTE

Learn all about CSS lists by visiting Listamatic, a tutorial and gallery of great CSS-based navigation, http://css.maxdesign.com.au/listamatic/.

If you're interested in a tool that will make some of these lists for you right online, check out List-O-Matic, http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp.

Next up, you'll be getting a bit more involved in the actual control of margins and padding, which is important for gaining a firm hand over your visual page elements. This will help segue you into the more complex aspects of CSS: laying out pages.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]