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; }