These tips are meant to whet your appetite for using CSS. These tips are more in the form of a "Quick Start" than a tutorial. For full tutorials refer to the "Resources and further reading" section of this article.
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
This will display the links on your page without an underline. When a user hovers over your link, the underline appears.
<html>
<head>
<title>Test Nav</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.topNav {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
.topNav a:link {
border: 1px solid;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 5px;
background : White;
text-decoration: none;
margin-right: 4px;
}
.topNav a:hover{
color : #FFFFFF;
background : #9900CC;
}
.topNav a:active{
color : Black;
background : #CCCCCC;
}
.topNav a:visited{
border: 1px solid;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 5px;
margin-bottom: 3px;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p class="topNav"><a href="link_one.html">link one</a> <a href="link_two.html">Link two</a></p>
</body>
</html>
This example creates a CSS class called topNav. It defines the formatting for links in the class. It is implemented by putting your navigation links in a paragraph and assigning that paragraph to the topNav class. You can see a version of this type of navigation buttons on my site www.christian-web-masters.co... . The main navigation buttons on my site use this technique. Using no images saves me a lot in bandwidth and causes the pages to load fast for my users.
Sean Buscay
www.christian-web-masters.comSean Buscay is on a mission to CREATE, ADVANCE, and EXPOUND faith in JESUS using web technology. He is the owner of Christian-Web-Masters.com .