Link types : a.class « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. a.class

Link types

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Chapter 2</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
a:link, a:visited {
  text-decoration: underline;
  color: #6A5ACD;
  background-color: transparent;
}
a:hover, a:active {
  text-decoration: underline overline;
  color: #191970;
  background-color: #C9C3ED;
}
.boxout {
  color: #FFFFFF;
  background-color: #6A5ACD;
}
.boxout a:link, .boxout a:visited {
  text-decoration: underline;
  color: #E4E2F6;
  background-color: transparent;
}
.boxout a:hover, .boxout a:active {
  background-color: #C9C3ED;
  color: #191970;
}
</style>    
  </head>
  <body>
    <div class="boxout">
      <p>Visit our <a href="store.html">online store</a>, for all your widget needs.</p>
    </div>
    <ul>
      <li><a href="#">Big Widgets</a></li>
      <li><a href="#">Small Widgets</a></li>
      <li><a href="#">Short Widgets</a></li>
      <li><a href="#">Tall Widgets</a></li>
    </ul>
  </body>
</html>








Related examples in the same category

1.Use a:link to select a hyperlink when it has not been visited.
2.Use a:visited to select a hyperlink when it has been visited
3.Use a:hover to select a hyperlink when the mouse hovers over it.
4.Use a:focus to select a hyperlink when it receives focus in other browsers.
5.Use a:active to select a hyperlink when it receives focus in IE.
6.style links: link, visited, hover, focus, active