Introduction
This guide shows how to create a stylish rollover effect for a menu which might normally be done with images. CSS is used to do the menu highlighting.

First off, we create the links, each of which is contained within a table cell.

<table summary="" cellpadding="1" cellspacing="1" >
<tr>
<td align="center">
<a href="#">Link</a>
</td> </tr>
<tr>
<td align="center">
<a href="#">Link</a>
</td> </tr>
</table>

The result (centred for your presentation):

Link

Link

Ok, not so pretty so now we specify styles for these. For the table (called .bodyline) we specify the following:

.bodyline
{
background: #f7f8fc;
color:#000000;
border:1px solid #000000;
}

We the link the table to the above class by inserting the following into the table statement:

<table summary="" cellpadding="1" cellspacing="1" class="bodyline">
<tr>
<td align="center">
<a href="#">Link</a>
</td> </tr>
<tr>
<td align="center">
<a href="#">Link</a>
</td> </tr>
</table>

The result:

Now, we have to specify two more table classes, one for the default background of the table cell, and one for when the mouse moves over the table cell.
For that we create two table classes:

Table cell default class:

.tableout
{
background-color:#DEE7FF;
color:#8B0000;
border:1px solid #000000;
}

The table cell when the mouse over event occurs:

.tableover
{
background-color: #BDCFFD;
color:#8B0000;
border:1px solid #000000;
}

Next up, we specify each table cell with the class (.tableout) like so:

<table summary="" cellpadding="1" cellspacing="1" class="bodyline">
<tr>
<td align="center" class="tableout">
<a href="#">Link</a>
</td> </tr>
<tr>
<td align="center" class="tableout">
<a href="#">Link</a>
</td> </tr>
</table>

And the result (centred):

Link

Link

We then specify what class takes precedent when we move the mouse over the table cell. To do this we insert the following into each cell:

<table summary="" cellpadding="1" cellspacing="1" class="bodyline">
<tr>
<td align="center" class="tableout" onmouseover="this.className='tableover'" onmouseout="this.className='tableout'">
<a href="#">Link</a>
</td> </tr>
<tr>
<td align="center" class="tableout" onmouseover="this.className='tableover'" onmouseout="this.className='tableout'">
<a href="#">Link</a>
</td> </tr>
</table>

This states that when the mouse moves over the table cell (in the case the <TD> tag), it shall switch to another CSS class (.tableover). When the mouse moves off the table cell, it shall switch to another CSS class statement (in this case the original one .tableout).
The Result:

Link

Link

But wait, there's more!
One could also insert an image, if one so desired. For example, by changing the .tableover CSS class to load the following image:

To do so, we edit the .tableover statement like so:

.tableover
{
background-color: #BDCFFD;
background-image: url('images/cssbackground.gif');
color:#8B0000;
border:1px solid #000000;
}

The result (once again, centred):

Link

Link

That is all, go now and master the art of CSS :)