Building a Basic CSS Menu

This tutorial will show you how to set up a CSS menu on your website. It will attempt to explain everything involved in the process, including things you probably know. It's going to be straightforward and as jargon-less as possible.

For starters we should set up the links which we will use in the navigation. For simplicity's sake, let's use "Home" "About Us" and "Contact" for our links. Let's say that the pages for those links are index.html for Home, about.html for About Us, and contact.html for Contact Us.

1.) Set up your links in the HTML where you want your menu to go.

Notice the spacer used between each link? That character is found above the Enter key on th keyboard. Now that you've set up the code, preview the page. It should look something like this:

Home | About Us | Contact Us

2.) Setup the style sheet.

Create a style sheet by creating a new document and saving it in the same folder as the HTML page you worked with in step 1. For the sake of this example name it "style.css" and open it up once it's saved.

Right now the menu text looks kind of ugly, so let's make it look better. Also, it's a good time to note the difference between a class and an id in CSS. A class is a style which you can apply to many elements of the page and it starts with a period in front of it. For example, if you wanted to create a specific type of heading you can set the text size, color, etc... and make it a class, then apply that class on any text that you want to look like that heading. An id is for a section of the website itself, and has a pound sign in front of it. You would use an id if you were setting up a part of the website with a specific width, background color, height, and so on. So if it's a section of the page that makes up the page use an id, and if it's going to be applied to elements within the site sections use a class.

So because the menu is a part of the site, we can start by creading an id which will be applied to the menu. In your style sheet create an id called "menu" which should look something like this:

#menu{

}

Within that id we can set up the way the text looks. Let's make it 10pt Tahoma for the example. It should look like this:

#menu{

font-size:10pt;

font-family:tahoma, sans-serif;

}

3.) Apply the id to the menu.

Go back to the HTML file from step 1. We are going to attach the stylesheet from step 2 so we can use the id we just made. To attach the style sheet put this line in the tag of your HTML page:

It's a good idea to link an external style sheet because that way if you ever need to change anything you just edit one css style sheet instead of opening every page or doing a find and replace. It can save you a lot of headaches down the line.

Now that the sheet is attached, we can use the menu id. To apply it to the menu, go to the line of code where you made the menu links in step 1. Above it put a div tag which has the menu id applied to it, and close the tag below the menu.

The inside of the opening div tag should say "div id=menu" without the quotes.

This divides the menu section and applies the style to it.

In addition to editing the text styles, you can edit the text color, background, and anything else you can style with css.

4.) Let's get rid of those underlines.

Well so far we have links that look spiffy but by default they're underlined and we can get rid of those to make it look more a bit more professional. In style.css we're going to build up the id we made. First let's set up another id within the menu id for links since the menu is really just a set of links. It should look something like this:

#menu a{

}

What this does is style the link tags that are located in the menu id. So all links located within the menu id will have this style, and if you were to create an id like this: #menu.h2

It would make all the h2 heading tags within the menu tag have the style you give the id. Don't make one though since menus don't have headings! It's just something worth knowing.

To get rid of the underlines on the links, let's add a style to them that removes the underlines like this:

#menu a{

text-decoration:none;

}

Let's give them a color that will let help them stand out as links. Try to choose one that shows up well on the background color. For the example we'll use a shade of grey:

#menu a{

text-decoration:none;

color:#444444;

}

Now save and preview your HTML page and you'll see that the underlines are gone and they will be grey. We didn't have to edit the HTML because the menu already has menu id on it and we just added to it. So let's add some more.

5.) Adding the rollovers.

Now that we've set up our links and styled them we're ready to add a rollover style. In style.css we're going to make another id for the rollover. It should look something like this:

We don't need to repeat the styles in step 4 since they are already applied to the menu links. Let's make the color change to a slightly lighter color so the links look like they light up. It should look something like this:

#menu a:hover{

color:#777777;

}

Now save everything and you're done. Congratulations, you've built a css menu.

Good luck with your menu!