Article
About the Author
Larisa Thomason
Larisa teaches college-level Web design and programming classes and helps private clients solve Web design and promotion problems. She specializes in non-profit organizations and political candidates. In addition, Larisa is a Senior Web Analyst at
NetMechanic.com
Build Your Site Navigation With CSS
Could anything look more boring than basic text links? Plain text displayed in the not very attractive colors of blue and purple, with no background colors, no rollovers, and nothing to make the page visually appealing...
This description might accurately describe plain text links, but text links styled using CSS properties are something else entirely! CSS makes it possible to create text links that look like buttons or menus and mimic the effect of an image file or JavaScript rollover. All this without the download time, accessibility, and promotion problems of images and JavaScript!
The "Look" Without The Load Time
Image-based navigation gives you control over presentation and layout, and even allows cool DHTML effects. Text-based navigation creates a site that's more accessible, downloads more quickly, and is much friendlier to search engine spiders.
Web designers use images for site navigation because they look cool as standalone page elements. When you add a little JavaScript code to create a rollover effect (where, for example, the button changes color and size when the mouse is dragged over it), you're also telling visitors "Hey! This is a link! Click on it and go deeper into my site!"
But there's one problem: you're relying on images to get this effect. JavaScript rollovers require at least two images for each link (one image for the basic button and another for the rollover). If you're linking to ten different pages, then you've just loaded up your page with 20 images that have to download before your navigation system is clear to visitors.
People with slow dial-up connections may not be willing to wait. They can choose from hundreds of millions of Web pages and may not think that your site is anything special -- particularly if the navigation system appears to be broken or non-existent.
So, our goal in this tutorial is to build a colorful, attractive text-based navigation system without the use of images.
Learn The CSS Link Pseudo-Classes
First, let's take a minute to review some basics: CSS link pseudo-classes. As you know, CSS classes are used to refer to a particular category of element. Similarly, a CSS pseudo-class refers to a particular state of an element. We'll use the pseudo-classes for different link states to create the navigation system.
People can have different states of consciousness: awake or asleep are the two most obvious. Well, in CSS, a hyperlink can exist in four different states, and you can set style properties for each:
Hover and link are the two most important link states for our purposes, but we'll define properties for all four.
Navigation Buttons With CSS
The design process can get quite complicated, because we're dealing with multiple link states and setting different properties for each. I always create a planning grid to clearly define my CSS properties before I ever begin to code them.
Note that we've actually set just two different style definitions and applied each one to two different link states. The link and visited properties get the same style definition and the active and hover states display identically as well.
Here's how the actual style definition looks.
<style type="text/css">
a.button:link
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:outset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}
a.button:visited
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:outset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:navy;
}
a.button:active
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}
a.button:hover
{
font-size:14px;
font-weight:bold;
text-decoration:none;
border-style:inset;
border-color:red;
border-width:5px;
background-color:#FFFFCE;
width:125px;
color:maroon;
}
</style>
Place it in your document's <head> section, or attach it via an external style sheet (remember to remove the <style> and </style> tags if you do!). Looking at it, you may wonder why I didn't let later definitions inherit all the common properties from the first definition. Ideally, that's the way style sheets should work: define the button once, and then for later states, just make changes as needed. Unfortunately, browser support for this is spotty! It's safer to add all the properties and values to each link state, even though it means duplicating some information.
Include the buttons on your Web page as you would any normal text link, but be sure to add the class name to the <a href> tag:
<a href="http://www.sitepoint.com/" class="button"
title="Visit SitePoint.com for valuable webmaster
resources">SitePoint</a>
The border property is what actually gives the button the look of a button. We set the border-style property to outset to give it the look of a regular button for the :link and :visited states, and provide an inset value for the :active and :hover states. That gives the link the appearance of a button that has been pushed.
Note that we defined each link as a dependent CSS class named "button." Otherwise, every link on the Web page would look like our navigation buttons -- even links within text content, and mailto links. When you create an individual class for your navigation system, you're free to style the text content and mailto links in a less obtrusive manner.
I could explain in detail how all this will look in a browser, but this example page shows the effect much more clearly. It has different buttons and even contains a simple horizontal navigation menu created with individual buttons placed side by side.
Explorer and Netscape create the most attractive buttons. There are slight display differences between Opera version 6 and version 7. WebTV displays the buttons, but without the border or rollover effect. a