HTML and CSS Tutorials - Link Effects, Lists, and Navigation
As you learned in Adding Text and Links, "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.
Table of content (tutorial index)