Having nice-looking, easy to navigate, simple navigation bars is very important for any web-site. Luckily, we have CSS to style our navigation with colors, fonts, images, etc… In this CSS tutorial we are going to learn how to style an unorganized list to create a basic tabbed navigation for your web-site. We will start with a basic unorganized list with anchors, and then we will be adding style to each part and element of our list. Let’s get started!

STEP ONE:

Let’s start by writing a basic HTML list. Structure an unorganized list using 4 or more list elements:

Now we are going to add anchor tags <a></a> to convert each list item into a link and we are going to specify the unorganized list with a unique ID, called “nav”:

I created an ID, just in case you need to create more unorganized lists within your HTML file.

STEP TWO:

It is time to start styling our list by linking a Cascading Style Sheet.
Create a CSS file, name it “style”, and attach it to your HTML page:

STEP THREE:

The first thing we need to style is the entire list; hence, we are going to add a declaration for ul #nav and add different properties to it.

Before you start writing the declaration for it, make sure to save in your images folder two images, one for the navigation main background and one for the current link. I used Photoshop CS5 to make the following images:
Step Three A Step Three B
Images zoomed in to 400%.

The smallest image has a size of 1px by 37px. I am going to use it for the background of my entire navigation bar. I named, “NavigationBg.jpeg”.
The largest image has a size of 1px by 43px. I am going to use it for the background when a link is selected. I named, “CurrentBg.jpeg”.

Now that we have our images ready, let’s write the declaration for our unorganized list:

As you can see, our unorganized list width depends on the user browser’s window and the height of our navigation will have the same height of our “Current.jpeg” image. Each word within the list is going to have a size of 11pt with a bold sans-serif font.
Also, we set none for each <li> element’s style, so no bullets will be added. At the end, we stated the background image properties for our unorganized list.

If you preview the file in your browser, you should obtain the following:
Step Three Preview

STEP FOUR:

Next, we are going to fix how each link is displayed. We are going to add a declaration for each <li> tag by writing, ul#nav li.
Let’s use the display property to generate a block box before and after each link and let’s float each link to the left with a 5px margin between each link:

Preview in browser:
Step Four Preview

Getting there!

STEP FIVE:

Each link needs more space and they also need more style. We are going to fix that by adding a declaration for each link’s anchor <a>:

Preview in browser:
Step Five Preview

Great! Now each link has its own space and color. We only need to add two more properties to style their hover and current state.

Subsequent, our links hover state doesn’t need too much style. Let’s just add a color to them:

STEP SIX:

To conclude with our tabbed navigation, we need to specify how each selected link will look. Here is where we apply our “CurrentBg.jpeg” image to give to our navigation a tabbed look. Because I don’t have linked pages for each link, I am going to add a class to one of the links so you can see how the current state works.

Preview in browser:
Final Result

That’s all readers! Download and modify the file to fit your needs.

Download Source Files