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.

    Styling Links

    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

    Link States

    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.

    CSS Link :link

    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>

    CSS visited link

    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> 

    CSS link hovers State

    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> 

    Change the link style when a user clicks

    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> 

    Setting Links State Rules

    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