Cascading Style Sheets
When creating a menu, the first thing we need to do is define the way that the menu will look on the page. To do this you need to understand a little about Cascading Style Sheets (CSS).
A style sheet is made up of style rules that tell a browser how to present a document. Each rule is made up of a selector - usually an HTML element such as BODY, TD or P - and the style to be applied to the selector. There are numerous properties that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented.
Style rules are formed as follows:
selector { property: value }
Multiple style declarations for a single selector may be separated by a semicolon:
selector { property1: value1; property2: value2 }
As an example, the following code segment defines the colour and font-size properties for the P element:
|
<head>
<style type="text/css">
p { font-size: 12px; color: black; }
</style>
</head> |
The above style sheet tells the browser to show paragraphs in 12 pixel black font. The CSS Specification formally defines all
properties and values available, and can be found with lots more information on Cascading Style Sheets here:
http://www.w3.org/Style/CSS/
Defining our menu
Now that we understand a little about CSS properties, we can look at the appearance of the menu. Let's take this for starters:
|
<head>
<style type="text/css">
a.menu {
display: block;
width: 100px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 12px;
color: #000000;
border: solid 1px #ffffff;
}
a.menu:hover {
color: #ffffff;
border: solid 1px #c0c0c0;
background-color: #000000;
}
a.menu:active {
color: #ff0000;
}
</style>
</head> |
First we tell the browser that we are going to create a style sheet in the head part of the page
<head>
<style>
Then we define how links will look on the page before they are clicked on
|
a.menu {
display: block;
width: 100px;
text-align: left;
text-decoration: none;
font-family: arial;
font-size: 12px;
color: #000000;
border: solid 1px #ffffff;
} |
Namely, a block with a width of 100 pixels with the text aligned left, no text decoration (underlining) and using the Arial font, 12 pixels in black (#000000). We define a white (#ffffff) border around each menu block, which will be invisible on a white background, but prevents the menu from resizing when the mouse hovers over it, as would happen if we didn't define this.
Next, we define how they will look when we hover over them with the mouse pointer. We want the background colour to change from white to black, the text colour to change from black to white and the border colour to change from white to light grey (#c0c0c0).
|
a.menu:hover {
color: #ffffff;
border: solid 1px #c0c0c0;
background-color: #000000;
} |
Finally, we define what will happen when a menu item is actually clicked on. The text colour becomes red (#ff0000). We then end the stylesheet definition and the header. Note that we do not need to redefine the background or border colour here because they have already been defined by hover.
|
a.menu:active {
color: #ff0000;
}
</style>
</head> |
Finishing off
OK, so that's the Cascading Style Sheet defined. What do we do now? Well, all we need to do is create an HTML table (or other layout, depending upon choice), create links to pages and tell them to use our menu definition.
We do this using the "class" attribute, like this:
|
<a href="http://example.com" title="example home page"
class="menu">Example 1</a> |
What we are saying here is create an HTML anchor (hyperlink) that goes to the site example.com, shows the words "example home page" when we hover over the link and uses the stylesheet class of "menu".
Here's our finished table:
|
<body bgcolor="#ffffff">
<table border="0" width="100">
<tr>
<td width="100%" style="background-color: #000000;
color: #ffffff; font-family: arial; font-size: 14px;
text-align: center;">Navigation</td>
<tr>
<td width="100%">
<a href="http://example.com" title="example home page"
class="menu">Example 1</a></td>
</tr>
<tr>
<td width="100%"><a href=http://example.com
title="example home page" class="menu">Example 2</a></td>
</tr>
<tr>
<td width="100%"><a href=http://example.com
title="example home page" class="menu">Example 3</a></td>
</tr>
<tr>
<td width="100%">
<a href="http://example.com" title="example home page"
class="menu">Example 4</a></td>
</tr>
</table>
</body> |
Note that I have used an inline stylesheet definition to define the appearance of the menu header. You should be able to understand what this means by now. So now all you have to do is take the stylesheet, take the above table, surround the two in opening and closing <html> tags and viola, you have a fully operational CSS menu!
Have fun!
