Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 17 Jan, 2022

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 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:

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 link 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:

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:

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 that 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:

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 on 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:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!