O'Reilly logo

Sams Teach Yourself CSS in 10 Minutes by Russ Weakley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 16. Creating Horizontal Navigation

In this lesson, you will learn how to create horizontal navigation from a standard HTML list. You will also learn how to float the <ul> element to create a navigation bar and float the <a> element to create a series of square buttons—each with a thin dividing line down its right edge.

Styling the List

To style this list, you will need to use selectors that target the <ul>, <li>, and <a> elements. You will also need to include the unique identifier, navigation, within each selector. The four selectors that you will use are shown in Listing 16.1. The HTML code is shown in Listing 16.2.

Example 16.1. CSS Code Showing the Selectors for Styling the List

ul#navigation {...} ul#navigation li {...} ul#navigation ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required