Web Design Tutorial: Creating Simple CSS Rollovers

One of the greatest things about CSS (Cascading Style Sheets) within HTML, is that you can create some interesting effects using simple style sheets and a static HTML web page. When CSS first came out, it's purpose was only to separate the style of a web page from it's actual content, making the content more accessible, cleaner and simplified. But, because of the advancement in HTML standards, and the creative individuals who found new ways of utilizing CSS, it is now possible to create drop-down menus, link rollovers, image rollovers and text generating rollovers.

In this tutorial I will describe the process of implementing text and image rollovers within list items using only HTML and CSS. No Javascript will be harmed in this tutorial! If you have no background in CSS, it would be beneficial for you to read my Beginners Guide to CSS

You can also learn more about the CSS list items used within this tutorial in my Guide to CSS and HTML Unordered Lists

First of all I would like to cover some basic background information regarding the accessibility of CSS rollovers. You don't need to fully understand the following information to use this tutorial, this is just a heads up to help you understand the other ways you may be able to utilize CSS, and assist you in grasping the concepts more fully.

To date, cross-browser rollovers can only be assigned to the link element within your CSS. This is the text/image held within or by the tag.

The examples I am going to use as CSS selectors are called Pseudo-Classes. These selectors are used to add some different and more advanced effects to your HTML web page. You can learn more about all of the Pseudo-Classes and their compatibility at the W3Schools CSS Link

This tutorial is only going to use the Anchor Pseudo class element. Anchor Pseudo class elements can only be used on the 'a' element of your CSS, but in CSS2 (which is not currently cross-browser capable), you can use many more selectors as Anchor Pseudo Class elements. Now, on to the tutorial.

1. Create a new HTML document, with all of the necessary DOD, head and body tags.

In this tutorial, we are going to place the CSS code inside the head portion of the document, as opposed to attaching it separately.

2. Start by creating the basic HTML of the list elements that we are going to create rollovers for.

Home
About Us
Products
Contact Us

This is a simple navigation list example, because the majority of rollovers are used for navigation or links. The entire navigation is held within a div container titled "mynavigation." The ul element is defined by the ID element "navmenu." The next example has the CSS and it should clarify any confusion that you might have. You can use your imagination through this tutorial if you want to apply rollovers to other 'a' elements.

3. Creating the CSS

The styles will go in between the portion of your document.

#mynavigation {

width: 200px;
}

#mynavigation ul {

margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: verdana;
}

#navmenu a {

display: block;
padding: 3px;
width: 160px;
background-color: #000000;
border-bottom: 1px solid #ffffff;
}

#navmenu a:link, #navmenu a:visited {

color: #ffffff;
text-decoration: none;
}

#navmenu a:hover {

background-color: #D5D0CD;
color: #6D7A73;
}

This is going to create a box, 200px in width around the entire navigation. Each link (between the elements) is displayed as a block, with a background color of black, and text color of white. The rollover state will produce different colors for the background of the block and the text color, shades of grey are used in this example. The Anchor Pseudo-Class elements are

• a:link - Applies the style to a link that has not been visited
• 
  

• a:visited - Applies the style to a link that has already been visited
  

• 
  
  
• a:hover - This is where your rollover comes in. This style is only applied when the user rolls their mouse over the link.
• 
  - This is where your rollover comes in. This style is only applied when the user rolls their mouse over the link.

In this case, when the user rolls over the link with their mouse, the background color of each link and the link text will change color. You can see an example of the two states of the links in the picture supplied. Experiment with different colors, try it for yourself in a simple .txt document or in your favorite web page design software.

This is a basic example of using rollovers to enhance your web page. You can apply these rollovers to any element, and you should experiment with different colors, styles and sizes on your own.