In HTML hyperlinks are added into the webpage by using the anchor tag <a>Name</a>. It creates the link navigate to another webpage from the current webpage.
The default HTML links are in blue color and when mouse hovered they get an underline. When the link is visited, it becomes violet. These default properties can be changed and can be customized by using different CSS properties.
Example 1: Create a basic customization of HTML link using CSS selector.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
a{
color:#006600;
text-decoration: none;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
Click me, I am a href link
</a>
</center>
</body>
</html>
|
Output:
The links can be further customized based on the state.
The links basically have 4 states.
Example 2: We can give different color to the links on change of their states.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
/* If the link is unvisited you see this color*/
a:link {
color: #006600;
text-decoration: none;
}
/* If the link is visited you see this color*/
a:visited {
color: rgb(255, 105, 223);
}
/* On placing mouse over the link */
a:hover {
color: rgb(128, 105, 255);
text-decoration: underline;
}
/* If the click the link, you see this color*/
a:active {
color: rgb(255, 105, 138);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Click the links</p>
<ul>
<li><a href=
DBMS
</a>
</li>
<li><a href=
Computer Networks</a>
</li>
<li> <a href=
Operating Systems</a>
</li>
<li><a href=
Data Structures</a>
</li>
And many more</a>
</li>
</ul>
</body>
</html>
|
Output: The unvisited and visited links have different colors. On placing the mouse over the second link, we see the change in color and style of the link. The order for placing a: hover must be after a: link and a: visited. The style a: active should come after a: hover.
Example 3: The links can be further styled by applying different CSS properties like background-colour, font-size, font-style, text-decoration and many.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
a:link {
color: #006600;
text-decoration: none;
}
a:visited {
color: rgb(255, 105, 223);
}
a:hover {
color: white;
text-decoration: underline;
font-size: larger;
font-style: italic;
background-color:#006600;
}
a:active {
color: rgb(255, 105, 138);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p> Click these links</p>
<ul>
<li><a href=
DBMS</a>
</li>
<li><a href=
Computer Networks</a>
</li>
<li> <a href=
Operating Systems</a>
</li>
<li><a href=
Data Structures</a>
</li>
<li><a href=
</li>
</ul>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!