In HTML, links can be styled with different colors by using CSS. You can target the different states of a link (normal, hover, active, and visited) to apply different colors.
Here is an example of how you can change the colors of links for each state:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colored Links</title>
<style>
/* Style for normal links */
a {
color: blue; /* Normal state */
text-decoration: none;
}
/* Style for visited links */
a:visited {
color: purple; /* After clicking */
}
/* Style for hover state */
a:hover {
color: green; /* When hovered */
}
/* Style for active links */
a:active {
color: red; /* When clicked */
}
</style>
</head>
<body>
<h1>Link Colors</h1>
<p>Click the link to see different colors.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
Explanation:
a: This targets the normal state of the link.a:visited: This targets the color of the link after it has been clicked.a:hover: This changes the link color when the mouse hovers over it.a:active: This changes the link color when it is being clicked.
You can modify the color values as needed, using any valid CSS color (such as color names, hex codes, RGB, etc.).
No comments:
Post a Comment