Navigation section with and without CSS

This is a typical pre-CSS code for having a blue horizontal navigation bar with a rollover effect:

<script type="text/javascript">
<!--
function RollOver(newImage) {
  /* A couple lines of JavaScript to replace background image with 'newImage' */
}

function RollBack() {
  /* A couple lines of JavaScript to go back to old image */
}
//-->
</script>

<table border="0" cellspacing="3" cellpadding="0" bgcolor="blue" height="20">
  <tr align="left">
    <td width="120" background="buttonbg.gif" nowrap>
       <a href="..." onmouseover="RollOver('active.gif')" onmouseout="RollBack()">
       <font color="white" size="4"><b>First button</b></font></a>
    </td>
    <td width="120" background="buttonbg.gif" nowrap>
       <a href="..." onmouseover="RollOver('active.gif')" onmouseout="RollBack()">
       <font color="white" size="4"><b>Second button</b></font></a>
    </td>
    <td width="120" background="buttonbg.gif" nowrap>
       <a href="..." onmouseover="RollOver('active.gif')" onmouseout="RollBack()">
       <font color="white" size="4"><b>Third button</b></font></a>
    </td>
  </tr>
</table>

This is how it could look like with CSS:

<style type="text/css">

/* The navigation bar */
.navbar {
  height: 20px;
  padding: 3px;
  background: blue;
  color: white; 
  font-weight: bold;
  font-size: larger;
  white-space: nowrap;
}

/* The buttons */
.navbar a {
  float: left;
  width: 120px;
  background: url("buttonbg.gif");
  font-decoration: none;
}

/* The rollover/hover effect */
.navbar a:hover {
  background: url("active.gif");
}
</style>

<div class="navbar">
  <a href="...">First button</a>
  <a href="...">Second button</a>
  <a href="...">Third button</a>
</div>

If the style element is replaced with a link to an external style sheet, the style section would be represented by a single line of code:

<link rel="stylesheet" href="/path/to/stylesheet.css">

<div class="navbar">
  <a href="...">First button</a>
  <a href="...">Second button</a>
  <a href="...">Third button</a>
</div>

Rollover/mouseover effects may not work entirely as expected on a device with no mouse.

Example 2 - Using alt text with headlines »