CSS Links

With CSS we can style hyperlinks in various different ways. The CSS hyperlink style work when cursor rollover or click on the specific hyperlink. The hyperlinks can be styled differently depending on what state they are in. The four link states are :

1. a:link - a normal, un-visited link. Example :
<!DOCTYPE>
<html>
<head>
<style>
  a:link {
    color: red;
  }
</style>
</head>
<body>
  <a href="">Click Here</a><br/><br/>
  <a href="">Click Here Again</a>
</body>
</html>
Output :

Click Here
Click Here Again

2. a:visited - a link the user has visited. Example :
<!DOCTYPE>
<html>
<head>
<style>
  a:link {
    color: red;
  }

  a:visited {
    color: green;
  }
</style>
</head>
<body>
  <a href="">Click Here</a><br/><br/>
  <a href="">Click Here Again</a>
</body>
</html>
Output :

Click Here
Click Here Again

3. a:hover - a link when the user mouses over it. Example :
<!DOCTYPE>
<html>
<head>
<style>
  a:link {
    color: red;
  }

  a:visited {
    color: green;
  }

  a:hover {
     color: blue;
  }
</style>
</head>
<body>
  <a href="">Click Here</a><br/><br/>
  <a href="">Click Here Again</a>
</body>
</html>
Output :

Click Here
Click Here Again

4. a:active - a link the moment it is clicked. Example :
<!DOCTYPE>
<html>
<head>
<style>
  a:link {
    color: red;
  }

  a:visited {
    color: green;
  }

  a:hover {
    color: blue;
  }

  a:active {
    color: black;
    background-color: red;
  }
</style>
</head>
<body>
  <a href="">Click Here</a><br/><br/>
  <a href="">Click Here Again</a>
</body>
</html>
Output :

Click Here
Click Here Again

Note : For more details about these states please visit the CSS puesdo-classes tutorials. : CSS Pseudo Classes

Next Topic :

No comments:

Post a Comment