HTML Link Colors
Last Updated :
22 Jan, 2024
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.
The HTML <a> tag defines the hyperlink.
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>
<a href=
class="link link-hex">
GeeksforGeeks (Hex)
</a>
<a href=
class="link link-html">
GeeksforGeeks (HTML color name)
</a>
<a href=
class="link link-rgb">
GeeksforGeeks (RGB)
</a>
<a href=
class="link link-hsl">
GeeksforGeeks (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>GeeksForGeeks</h1>
<p>Welcome to the world of knowledge
<a href=
GeeksForGeeks
</a>
</p>
</body>
</html>
|
Output:
In this a button is made clickable by using anchor tag.
Example: Implementation of HTML link button 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>Link Button Example</title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
cursor: pointer;
border: 2px solid #008CBA;
color: #008CBA;
border-radius: 5px;
background-color: white;
}
</style>
</head>
<body>
<a href=
class="button">
GeeksforGeeks
</a>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...