CSS for Hyperlinks
Styling links in CSS allows you to control the appearance of hyperlinks on your webpage. Here are the key CSS properties and pseudo-classes used to style links:
CSS Pseudo-Classes for Links
- a:link: Targets links that have not yet been visited.
- a:visited: Targets links that have been visited by the user.
- a:hover: Targets links when the user hovers over them.
- a:active: Targets links at the moment they are clicked or activated.
CSS Properties for Styling Links
- color: Changes the text color of the link.
- text-decoration: Adds or removes text decorations (e.g., underline, overline, line-through).
- font-weight: Sets the thickness of the text.
- font-style: Changes the text style (e.g., italic).
- background-color: Sets the background color of the link.
- border: Adds a border around the link.
- padding: Adds space inside the link around the text.
- margin: Adds space outside the link.
- text-transform: Changes the text case (e.g., uppercase, lowercase).
EXAMPLE TO SHOW HYPERLINKS
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: blue; /* Default link color */
text-decoration: none; /* No underline */
}
a:visited {
color: purple; /* Color of visited links */
}
a:hover {
color: red; /* Color when hovered */
text-decoration: underline; /* Underline on hover */
}
a:active {
color: orange; /* Color when the link is clicked */
}
</style>
</head>
<body>
<a href=”https://example.com”>Visit Example.com</a>
</body>
</html>