CSS Rollover Tutorial

This is a basic walkthrough for the creation of a CSS-driven list of buttons that change color when you run your mouse over them. They are called "rollovers."

You're also going to begin learning about one of the most powerful features of CSS, the div tag

Here's what they will look like when we're finished. If you find them boring, you'll be able to change them once we're done.

Step One

Create a basic HTML page. Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>My CSS Rollover Page</title>

<style type="text/css">

</style>

</head>

<body>

</body>
</html>

You can just cut and paste this into your own file. Name it yournamerollover.html . Replace yourname with your name, and don't forget the .html extension.

Step Two

Now, you're going to create a simple unordered list. The links are fake. The "milk," "eggs," "cheese" stuff is just there to put some text in the buttons. We can change it later.

Remember, this goes in between your body tags.

<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>

Save your file and have a look. Not so much yet, is it? Well, we're getting there.

Step Three

Now you're going to wrap your list in a div tag. This will set the list off to itself in the Web page, and let us format it without having all that formatting leak over to the rest of the page.

Put this just ABOVE your list.

Like almost every tag, it needs a closing tag. Put this just BELOW your list.

</div>

A few things:

A lot of people use the term "navcontainer" to identify the part of their site that handles the navigation (where you can go from a particular page). We could name it anything we like, as long as it helps us remember what it is and what it does. You can name it "fred" if you want, but that doesn't mean anything, and when you go back six months later to fix something, you won't know what "fred" stands for.
"Navcontainer" is an ID. That means you can only have one of these per page. If you want more than one of these lists, you'd have to use a CLASS instead.

Step Four

We're going to remove the bullets from your list. In your style sheet (between the <style> and </style> tags), put this piece of code:

#navcontainer ul {
list-style-type: none;
}

Let's learn what this stuff means.

The # tells the browser that you're talking about an ID.
The name of the ID is "navcontainer."
The UL tells the browser that we're styling an unordered list (UL).
The "list-style-type: none" tells the browser that we don't want any style on our list. In other words, it gets rid of the buttons.

Now save your file and take a look. Still not much, huh? We're making progress....

Step Five

We're going to get rid of the "padding" and "margins" that lists have. Different browsers--Firefox, Internet Explorer, Opera, Chrome, others--indent their lists differently. We don't want any of them to indent anything. So let's tell it to get rid of the margins and padding they might want to use.

You're going to add these to your UL element in your style sheet.

#navcontainer ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
}

Here's a great image that illustrates the difference between margins and padding:

(I borrowed this image from CSS Template Heaven. They offer a lot of freebies, and this image is free for us to use. Remember, we always credit our sources.)

Step Six

Remember the "block" and "inline" stuff we learned? Here's a time where we have to make sure the navcontainer list is a block element. If we don't, the rollover won't work.

Add this to your style sheet:

#navcontainer a {
display: block;
}

Save it and have a look. STILL not much different, huh? Be patient, we're building it up from the inside out.

Step Seven

Now we're going to add some color. (Finally!)

Add this under your display: block code in the navcontainer element:

color: #ffffff;
background-color: #003366;

You know what this does. Save it and take a look. Finally, something's different!

The colors can be changed later. Right now, let's finish this out and then we can make changes.

And why does it go all the way to the end of the page? That looks terrible. We're going to fix that right now.

Step Eight

We're going to set the width of the links so they won't go all the way across the page.

Add this to your #navcontainer a styling:

width: 9em;

Check it out. Better, huh?

What's an em? It's a unit of measurement we use on the Web. Here's the definition from our pals at the W3 Consortium:

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.

Say what? All we need to know right now is that it's a relative, not an absolute, unit of measurement, which means it will change a bit with different browsers, monitor sizes, etc.

Step Nine

Remember we got rid of all our padding? Now we're going to add some back.

Add this to your #navcontainer a styling, just under the width property:

padding: .2em .8em;

See the difference? Now we've got some room to breathe.

Step Ten

We probably don't want underlines on our links; they look trashy. Let's get rid of them. Add this just under the padding property:

text-decoration: none;

Step Eleven

Now, finally, is when we get to the actual "rollover" part. At least we're starting.

We're going to create a new element for our style sheet. It will control the hover state of our links -- what they look like when we hover our mouse over them. Add this to your style sheet:

#navcontainer a:hover {
background-color: #0ebfe9;
color: #ff0000;
}

Save it and try it out. Run your mouse over your buttons. Now we're getting somewhere!

Step Twelve

They still don't look like buttons.... Let's add some space to the margins to separate a bit.

This will be yet another separate element in your style sheet.

#navcontainer li {
margin: 0 0 .2em 0;
}

See the difference in using padding and margins? If we had used the padding property, the space would have been dark blue. The margin property allows the background color to show through.

Step Thirteen

But everything is still flat-looking. We want to give the impression of "raised" buttons that "depress" when we "click" them. Here's what we do.

In your navcontainer a element, add these properties:

    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #003366;
    border-bottom: 1px solid #003366;

Step Fourteen

Getting there, but they don't look like they "click" when we roll our mouse over them.

This will create that effect. Add this to your navcontainer a:hover element:

    border-top: 1px solid #003366;
    border-left: 1px solid #003366;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;

What we've done is "flipped" the border colors. The top and left are one color (white) and the bottom and right are another color (dark blue). When we roll over the buttons, the borders "flip," so the top and left borders are now dark blue and the bottom and left borders are white. Neat visual effect, huh?

There are other ways to do this, notably with the inset and outset border styles, but this one works nicely for our purposes.

Finished!

Thanks to Listutorial for the original code and walkthrough.

Now let's play with changing the colors, fonts, sizes, whatever. Just remember, make one change at a time, and test it before you try something else.