How to Change Link Color using CSS?

The default color of links in most of the browsers is Blue. However, sometimes, you might want to get rid of this default link color and apply your own colors. But how can we do that?

To change the link color in CSS we have to use the :link pseudo-class selector in combination with the color property. The :link selector allows you to select and style all unvisited links.

The :link selector in the following example sets the link color of all unvisited links to Green:

Example:

a:link{
   color: green;
}

Here is one more example as above but it only changes those links’ color which have the target="_blank" attribute. This attribute is used to open a link in a new tab.

Example:

a[target="_blank"]:link{
   color: green;
}

While styling the links, it should be remembered that the a:link is placed before a:visited, a:hover and a:active. OR rather I would say that these four pseudo-classes must be in the following order:

  • a:hover must come after a:link and a:visited
  • a:active must come after a:hover

If the above order is not followed, you might face some unexpected results.

The below example shows the correct order of different links’ states:

Example:

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

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

/*link hover*/
a:hover{
    color: blue;
}

/*selected link*/
a:active{
    color: orange;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts