CSS Link

In this CSS tutorial, we will be discussing the different values for the anchor <a> tag styling. HTML <a> tag is used to create a clickable text that could lead to a specific webpage or point to the same page.

Similar to a simple text, we can use CSS color, font-family, background-colour, and many other properties for Links.

Example: 

   <a style=" color : red; font : oblique bolder 12px cursive;"  href=''>
        It's a Link
     </a>

Preview:

It's a Link

A Link can also be styled according to its state. The state signifies the current position of the link. For example, we can provide different styling to link if the user hovers over it, or we can specify different styling when the user clicks the link.

State Description
link It defines a link which has not visited by the user yet. Which means the user has not clicked on the link.
visited It establishes a link on which user has been clicked
hover It defines the link styling when the user hovers the cursor over the link.
active It defines the link styling when the user clicks the link.

Note

We use internal CSS technique to specify the styling for the link states.

The :link state defines the styling for a normal unvisited link. And similar to other text stylings we can use all the properties for link text.

Example 

<html>

<head>

<style>
   a:link{
     color : red;
     font : oblique bolder 12px cursive;
       }
</style>

</head>
 <body>
    <a href=''>
     It's a Link
    </a>
 </body>

</html>

The to set styling for a visited link we can use the :visited state.

Example 

<html>

<head>
   <style>
      a:visited
        {
      color:green;
        }
    </style>
  </head>
  <body>
     <a href=''>
       It's a Link
     </a>
   </body>
</html>

The styling of a link can also be manipulated when the user hovers the mouse over the link.

Example 

<html>
<head>
<style>
     a:hover
       {
        color:black;
        background-color: yellow;
       }
     </style>
   </head>
   <body>
     <a href=''>
       It's a Link
     </a>
   </body>
</html>

Using the link :active state, we can set a different styling for a link when the user clicks the link.

Example 

<html>
   <head>
        <style>

           a:active{
              color:black;
              font : oblique bolder 12px cursive;
              background-color: yellow;
            }

        </style>
    </head>
    <body>
        <a href=''>
            It's a Link
        </a>
    </body>
</html>

There are some rules we need to follow when we define styling for various link states.

  • The a:hover state must be defined after a:link and a :visisted
  • And a:active must be defined after a:hover

Summary

  • The link text can be styled similar to normal text.
  • The link can be present in 4 states, link, visited, hover, and active.
  • The :link state defines the unvisited link.
  • The :unvisited state defines the unvisited link.
  • The :hover state defines when the cursor is over a link.
  • The :active state defines when the user clicks the link.
Previous Tutorial Next Tutorial