Link Effects, Lists, and Navigation

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.

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.

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.