HTML Link Colors

In its default appearance across all browsers, a hyperlink exhibits the following characteristics:

Unvisited Link: It is denoted by an underlined format and appears in blue colour.
Visited Link: This link is underlined and its colour is purple.
Active Link: It is typically encountered during the moment of interaction (such as clicking), and its colour is red.

Example: Implementation of HTML Link color using HTML Hex color codes, HTML color names, RGB color values, and HSL color values

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Link Color Examples</title>
    <style>
        .link {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            font-weight: bold;
            font-size: 18px;
            margin-right: 20px;
        }
 
        /* Link with Hex color code */
        .link-hex {
            color: #FF5733;
        }
 
        /* Link with HTML color name */
        .link-html {
            color: DarkOliveGreen;
        }
 
        /* Link with RGB color value */
        .link-rgb {
            color: rgb(0, 128, 255);
        }
 
        /* Link with HSL color value */
        .link-hsl {
            color: hsl(120, 100%, 50%);
        }
    </style>
</head>
 
<body>
 
    <!-- Link with Hex color code -->
    <a href=
"https://www.w3wiki.org/"
       class="link link-hex">
      w3wiki (Hex)
      </a>
 
    <!-- Link with HTML color name -->
    <a href=
"https://www.w3wiki.org/"
       class="link link-html">
      w3wiki (HTML color name)
      </a>
 
    <!-- Link with RGB color value -->
    <a href=
"https://www.w3wiki.org/"
       class="link link-rgb">
      w3wiki (RGB)
      </a>
 
    <!-- Link with HSL color value -->
    <a href=
"https://www.w3wiki.org/"
       class="link link-hsl">
      w3wiki (HSL)
      </a>
 
</body>
 
</html>

Output:

Example: Implementation of HTML link color with visited,unvisited, and active links with an example.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>HTML Link color</title>
    <style>
        a:link {
            color: green;
            background-color: transparent;
            text-decoration: none;
        }
 
        a:visited {
            color: pink;
            text-decoration: none;
        }
 
        a:hover {
            color: red;
            text-decoration: underline;
        }
 
        a:active {
            color: yellow;
            text-decoration: underline;
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <p>Welcome to the world of knowledge
        <a href=
"https://www.w3wiki.org/problem-of-the-day">
          w3wiki
          </a>
    </p>
</body>
 
</html>

Output:

HTML Link Colors

HTML Link Colors refer to the color applied to the text within the <a> element, determining how hyperlinks appear on a webpage and can be modified through the CSS ‘color’ property. By default, links are typically displayed in blue for unvisited links, purple for visited links, and red for active links. However, developers can customize these defaults by assigning specific color values to the ‘a’ (anchor) selector in their CSS style sheets.

Table of Content

HTML Link Tags
HTML Link Colors
Link Buttons

Tags:

#HTML5 #HTML #Web Technologies

HTML Link Tags

Link Buttons

HTML Link Colors

HTML

HTML

HTML Link Colors

Similar Reads

Contact Us