HTML and CSS Link Effects, Lists, and NavigationHTML and CSS - Link Effects, Lists, and Navigation
Link Effects, Lists, and Navigation
Working with Link States
Modifying Link Styles
Multiple Link Styles Using Class Selectors
Styling Links Using Descendant Selectors
Styling Ordered Lists
Styling Unordered Lists
Shorthand CSS for List Styles
List-Based Vertical Navigation Using Color
Vertical List Navigation with Image Effects
Horizontal List-Based Navigation with Color
Horizontal List Navigation with Images
Rich Links, Lists, and Navigation
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.