Open In App

What are different colors associated with link to display their importance in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

Link is an HTML object that is used to connect one web resource to another. It is used to jump to a new location on the web by clicking on it. The <a> tag is used to insert links in an HTML document. Links are interactive elements and to indicate their interactivity links have different colors in HTML depending on their current state i.e. visited, unvisited, or active. The default style for different link states is as follows.

  • Unvisited link: underlined and blue
  • Visited link: underlined and purple
  • Active link: underlined and red

Unvisited link: Hyperlinks that take the user to a webpage that they have not seen before are referred to as unvisited links. By default, these are blue in color, and the text of the link is shown as underlined text.

Example 1: In this example, we will show the unvisited link.

HTML




<!DOCTYPE html>
<html>
<body>
    <p>Default style of unvisited link:</p>
    <p>Unvisited Link</p>
        GeeksforGeeks
    </a>
</body>
</html>


Output:

Unvisited link

Example 2: The default state color of unvisited links can be changed by using CSS: link selector. The following code changes the color of the unvisited link to “red” color.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        a:link {
            color: red;
        }
    </style>
</head>
<body>
    <p>Changing default color of unvisited link:</p>
    <p>Unvisited Link</p>
        GeeksforGeeks
    </a>
</body>
</html>


Output:

Unvisited link

Visited Link: Hyperlinks that take the user to a webpage that they have already visited are referred to as visited links. By default, these are “purple” in color, and the text of the link is shown as underlined text.

Example: In this example, we will default behaviour of a visited link.

HTML




<!DOCTYPE html>
<html>
 
<body>
    <p>Default style of visited link:</p>
    <p>Visited Link</p>
 
        GeeksforGeeks
    </a>
</body>
 
</html>


Output:

Visited Link

Visited link using CSS styles: The default state color of the visited link can be changed by using “CSS : visited” selector. The following code changes the color of the visited link to “green”

Example: In this example, we will style a visited link using CSS.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        a:visited {
            color: green;
        }
    </style>
</head>
<body>
    <p>Changing default color of visited link:</p>
    <p>Visited Link</p>
        GeeksforGeeks
    </a>
</body>
</html>


Output:

Visited Link

Active link: Hyperlinks show the browser is in the process to load a new resource which is referred to as active links. By default, these are “red” in color and the text of the link is shown as underlined text.

Example 1: In this example, we will create an active link.

HTML




<!DOCTYPE html>
<html>
<body>
    <p>Default style of active link:</p>
    <p>Active Link</p>
        GeeksforGeeks
    </a>
</body>
</html>


Output:

Active link

Example 2:The default state color of the active link can be changed by using the “CSS :active” selector. The following code changes the color of the active link to “yellow”.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <p>Changing default color of active link:</p>
    <p>Active Link</p>
        GeeksforGeeks
    </a>
</body>
</html>


Output:

Active link

Hover Link: Hyperlinks that change their attribute values when the mouse hovers over them are referred to as hover-links. The default color of the link can be changed by using the “CSS: hover” selector for links. The following code changes the color of the hover link to “orange”.

Example: In this example, we will show a color change when we hover on a link.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        a:hover {
            color: orange;
        }
    </style>
</head>
<body>
    <p>Changing color of link on hovering:</p>
    <p>Hover Link</p>
        GeeksforGeeks
    </a>
</body>
</html>


Output:

Hover Link



Last Updated : 01 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments