Set style for a:link and a:visited : Pseudo Class « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Pseudo Class

Set style for a:link and a:visited

  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>*KHAKI*</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">

#navlist {
  padding: 0.5em 0;
  margin: 0 0 20px 0;
  text-align: left;
  letter-spacing: 5px;
  background: #BC5510;
}

#navlist li {
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a {
  padding: 0.5em 0.5em;
  margin: 0;
  color: #000;
  background: #BC5510;
  text-decoration: none;
}

#navlist li a:link,#navlist li a:visited {
  color: #000;
  background: #BC5510;
}

#navlist li a:hover {
  color: yellow;
  background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
}

#navlist li a#current {
  color: #fff;
  background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
}




</style>

</head>
<body>
  <div id="navcontainer">
    <ul id="navlist">
      <li><a href="">HOMEPAGE</a></li>
      <li id="active"><a id="current" href="">ABOUT</a></li>
      <li><a href="">GALLERY</a></li>
      <li><a href="">LINKS</a></li>
      <li><a href="">SERVICE</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </div>
</body>
</html>








Related examples in the same category

1.The first-child Structural Pseudo-Class
2.Dynamic Pseudo-Class Selectors
3.first-letter and :first-line Pseudo-Elements
4.Dynamic pseudo-classes
5.Structural pseudo-classes
6.:target pseudo-class
7.h1::before, h1::after content: "::";
8.The first-child pseudo-class
9.Using the first-letter pseudo-element to create a "drop cap" letter
10.Link Pseudo-Class Example
11.:before and :after Pseudo-elements
12.Use Pseudo-Classes
13.First-letter Pseudo-element
14.Creating a drop cap using a CSS pseudo-element
15.First Line and Letter
16.p:first-line{font-weight:bold;}
17.first-letter {font-size:42px; width:200px;}
18.tr:first-child