Back to CSS Tips
Preview: what the working site looks like.

When styling links with your CSS, alway remember the LoVeHA rule. List your psuedo-classes in this order:

  1. :link
  2. :visited
  3. :hover
  4. :active
this link has the id #one this link is styled by .two
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>  
    <div id="container">
        <a href="" id="one">this link has the id <strong>#one</strong></a>
        <a href="" class="two">this link is styled by <strong>.two</strong></a>
        	<ul id="linkys">
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
                <li><a href="#">linky</a></li>
            </ul>
        <div id="ftrLinks">
            <a href="mailto:your@email.com" id="email">E-Mail me</a>	       
            <span>Web Design by <a href="http://nopeople.com/design/">nopeople.com</a></span>
        <!--end ftrLinks--></div>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 600px;
	margin: 50px auto;
	padding: 20px 0;
	background: #999;
}
a#one,
a.two {
	margin: 0 0 0 50px;
	display: block;
}
			#one:link, #one:visited {
				text-decoration: none;
				color: #fff;
			}
			#one:hover, #one:active {
				text-decoration: underline;
				color: #f00;
			}
/*=====================================*/
a.two:link, a.two:visited {
	font-size: 40px;
	color: #0f0;
	text-decoration: none;
}
a.two:hover, a.two:active {text-decoration: underline;}
/*=====================================*/
			ul#linkys {
				width: 150px;
				margin: 50px 0 0 50px;
				padding: 0;
				background: #ccc;
				list-style: none;
			}
			ul#linkys li {
				line-height: 28px;
			}
				ul#linkys li a:link, ul#linkys li a:visited {
					padding: 0 0 0 10px;
					display: block;
					color: #000;
				}
				ul#linkys li a:hover, ul#linkys li a:active {background: #999;color: #f00;}
/*=====================================*/
#ftrLinks {
	line-height: 20px;
	margin: 30px 0 0 0;
	padding: 0 20px 0;
	background: #ccc;
	font-size: 0.9em;
	text-align: right;
}
	#ftrLinks #email {float: left;}
		#ftrLinks a:link, #ftrLinks a:visited {color: #000;}
		#ftrLinks a:hover, #ftrLinks a:active {color: #f00;}