Test.

With a dash of CSS, we can turn a plain old list into a fairly snazzy navigation bar in no time at all. Today, we’ll take a look at how to build a navigational element for our website using HTML and CSS as our tools.

STEP ONE:

The HTML

Our navigation will be based on a simple unordered list, wrap each item in a link tag, and then we’ll flesh out the list using CSS. Here’s what the initial HTML setup looks like:

That should be plenty of navigation for our simple project. Viewing this page in a browser will display a vertical list of our items:
Step One

STEP TWO:

The CSS
Since we want our navigation to be horizontal, we’ll need to use a bit of CSS.
We’ll declare that we want any items in our navigation list to be displayed inline. To do that, we will use the float property. Let’s add the first line of CSS now:

Now our navigation elements will all appear in a nice horizontal line, as much of the navigation you see online today does.
Step Two

STEP THREE:

Element Definition

The next step will be to give each a bit of definition. To do this, we’ll give them a defined height and width, as well as a border. We’ll also add some padding to each of the elements, and remove the bullet from the items. Here’s what the CSS should look like now:

Now, if you take a look at the page, you’ll see our list items are starting to look a bit more like a typical navigation. They each have a border, a bit of padding, and are being displayed side-by-side. Exactly, what we are looking for.
Step Three

STEP FOUR:

Link Formatting

Let’s center our link titles a bit, and remove the underline. We’ll do that by setting the text-align property to center, and by setting the text-decoration property to none. Here’s what that looks like:

Step Four

STEP FIVE:

Styling Text

So we now have a basic navigation, however the text still looks fairly plain. Let’s spruce that up a bit by making the font size slightly larger and bolder. We’ll implement this by setting the font-weight property of our links to bold, and the font-size property to 18px. Here’s what that looks like in the code:

Code Block
style.css

Changing the text style:

Preview in browser:
Step Five

STEP SIX:

Styling Links

Our navigation is coming together quite nicely. We can now begin setting up what we want to happen when a user rolls over our navigational elements. First, know that every browser chooses its own default color for links. Google Chrome and Firefox use purple, Internet Explorer uses a light-blue. We'll want to go ahead and set our own default color for links, so let's do that now:

Code Block
style.css

Changing the links' default color:

Preview in browser:
Step Six

STEP SEVEN:

Hover States

The last step for the day is to create a hover state so that when a user hovers over one of the links, the background color changes. Creating a hover state in CSS requires the use of a psuedo-selector which looks like this:

Code Block
style.css

Adding hover states to our links:

Adding the previous line of code to the style sheet will result in you being finished with a pretty good looking navigation in a fairly short amount of time. Preview the navigation in a browser to bask in all of its goodness:
Final Result

Creating good looking navigation isn't hard to do, and only requires that you know how to target the elements and style them to look like a typical navigation. Mess around with colors and hover states until you get the style that suits your site perfectly. Join us next time when we discuss how to spruce up your paragraphs using some crafty CSS techniques. See you then!

Download Source Files