CSS Links

In this tutorial, today we will learn “how to styled different properties of links through CSS”?  There are four different types of links forms, which can be styled differently see below:

  1. a:link — apply CSS property (e.g. color, size, etc.) for normal or unvisited hyperlinks.
  2. a:visited — apply CSS property (e.g. color, text-decoration, etc.) for hyperlinks that the user has already visited.
  3. a:hover — apply CSS property (e.g. font-family, size, etc.) for a hyperlink when the user place the mouse pointer over link.
  4. a:active — apply CSS property (e.g. background, size, etc.) for hyperlinks when they are being clicked.

Let’s see the given example to understand how css links style works:

CSS Links Examples

<!DOCTYPE html> 
<html> 
<head>
      <style type = "text/css">
      /* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: pink;
}
     </style>
   </head>
</html>

 

Pin It on Pinterest

Shares
Share This