CSS Menù

I would like to briefly discuss in this tutorial how to build a simple menu but nice effect by using a style sheet. What will get a menu like this:I would like to briefly discuss in this tutorial how to build a simple menu but nice effect by using a style sheet. What will get a menu like this:

> First voice

> Second voice

> Third voice

> Fourth voice

STYLE SHEET STYLE.CSS

To achieve this we need to build a menu style sheet that will call stile.css. Our style sheet will contain the following instructions:

@charset "utf-8";

              /* CSS Document */

  

  .style1

    {

    font-family:"Trebuchet MS";

    font-size:13px;

    color:#000000;

    }

  

  #boldchar a:hover {color: #000000;font-weight:bold;}

    #boldchar a:visited {color: #000000;}

    #boldchar a {color: #000000; text-decoration:none;}

Basically we have defined a class in which style1 define properties that must be the font of the menu.
Then we define a property for the links and call boldchar.
This property tells us that when you pass the mouse over the link (hover), the font color should be dark and should become bold, if the link is clicked (visited) the color should be dark and mell'ultima line is defined that the link must not underline (text-decoration: none).

Now let's build the html page containing the menu. We call menu_bold.html.

PAGE MENU_BOLD.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS Menù</title>

</head>



<body>

<table width="160" border="0" cellpadding="4" bgcolor="#FFFFCC" style="border:1px dashed;border-color:#FFCC99;">

<tr>

<td style="border-bottom:1px dashed;border-color:#FFCC99;"><div class="style1" id="boldchar">&gt; <a href="#">First voice</a></div></td>

</tr>

<tr>

<td style="border-bottom:1px dashed;border-color:#FFCC99;"><div class="style1" id="boldchar">&gt; <a href="#">Second voice</a></div></td>

</tr>

<tr>

<td style="border-bottom:1px dashed;border-color:#FFCC99;"><div class="style1" id="boldchar">&gt; <a href="#">Third voice</a></div></td>

</tr>

<tr>

<td><div class="style1" id="boldchar">&gt; <a href="#">Fourth voice</a></div></td>

</tr>

</table>

</body>

</html>