CSS Link

By | October 3, 2021

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

Vamware

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.

Link state

Vamware
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.

People are also reading:

Author: Vinay

I am a Full Stack Developer with a Bachelor's Degree in Computer Science, who also loves to write technical articles that can help fellow developers.

Leave a Reply

Your email address will not be published.