Link Pseudo-Class Example : Pseudo Class « Style Basics « HTML / CSS






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

Link Pseudo-Class Example

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>HTML/XHTML:  &raquo; Link Pseudo-Class Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
a:link {color: blue; text-decoration: none;}
a:active {color: red; background-color: #FFFFCC;}
a:visited {color: purple; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:focus {border-style: dashed; border-width: 1px;
background-color: #FFA500;}
</style>

</head>
<body>
<div class="content">
  <a href="http://www.htmlref.com">HTML: </a>
</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.:before and :after Pseudo-elements
11.Use Pseudo-Classes
12.First-letter Pseudo-element
13.Creating a drop cap using a CSS pseudo-element
14.First Line and Letter
15.p:first-line{font-weight:bold;}
16.first-letter {font-size:42px; width:200px;}
17.tr:first-child
18.Set style for a:link and a:visited