CSS Hyperlinks Style - How To Change Hyperlink Color

CSS Hyperlinks Style work when cursor rollover or click on specific hyperlink. you can set hyperlink styles using various CSS properties like background-color, font-family, font-weight, color, font-size and many more.

You can also set special styles depending on special event perform over hyperlink.

Following are special hyperlink event to apply CSS style when this occur.

  • a:link Normal unvisited link
  • a:visited Link already user has been visited
  • a:hover When user mouse hover over the link
  • a:active Clicked the link at that moment

Here some rules apply when you set the style for hyperlink.

  • a:hover always come after a:link or a:visited
  • a:active always come after a:hover

Following CSS hyperlink Style property are various type style listed.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS hyperlink</title>
  <style type="text/css">
    a:link {color:#e14d43;}    /* normal link */
    a:visited {color:#50afe5;} /* visited link */
    a:hover {color:#fe0000;}   /* mouse over link */
    a:active {color:#fe0000}   /* selected link */
  </style>
</head>
<body>
  <div>Click here to open <a href="../tutorial.php" >CSS example</a> page.</div>
</body>
</html>

Run it...   »

CSS Links Background Color

Here hyperlink set background color on :link, :visited, :hover, :active.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS hyperlink set background-color</title>
  <style type="text/css">
    a:link {background-color:#CCCCCC;}     /* normal link */
    a:visited {background-color:#CCFFCC;}  /* visited link */
    a:hover {background-color:#FF0000;}    /* mouse over link */
    a:active {background-color:#FFFFFF;}   /* selected link */
  </style>
</head>
<body>
  <div>Click here to open <a href="../tutorial.php" >CSS example</a> page.</div>
</body>
</html>

Run it...   »

CSS Text Decoration

Here hyperlink set background color on :link, :visited, :hover, :active.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS hyperlink</title>
  <style type="text/css">
    a:link { text-decoration: none; } 
    a:visited { text-decoration: none; }
    a:hover { text-decoration: underline; }
    a:active { text-decoration: underline; }
  </style>
</head>
<body>
  <div>Click here to open <a href="../tutorial.php" >CSS example</a> page.</div>
</body>
</html>

Run it...   »