Links

In CSS, links can be styled by using various properties to control their appearance.
Links typically include three states: unvisited, visited, and hover. Here's how you can style links using CSS

Unvisited Links:

To style links that haven't been visited yet, use the: link pseudo-class.
You can set properties such as color, text-decoration, and font-weight to customize the link's appearance.

example:

a:link {
 color: blue;
 text-decoration: none;
 font-weight: bold;
}

Visited Links:

To style links that have been visited, use the: visited pseudo-class. Keep in mind that browser security measures limit the styling of visited links to maintain user privacy. You can't change properties like color, but you can modify properties such as text-decoration and font-weight.

Example:

a:visited {
 text-decoration: line-through;
}

Hover and Active Links:

To style links when a user hovers over them or when they are actively clicked, use the: hover and: active pseudo-classes, respectively.
This allows you to create visual feedback for users.

example:

a:hover {
 color: red;
}
a:active {
 background-color: yellow;
}

Set the Color of Links:

we can set the color of links by using the Color property.
The color property controls the text color of the link in its different states: unvisited visited, hovered, and active.

Example:

<html>

<head>
    <style type="text/css">
        a:link {
            color: #000000
        }
    </style>
</head>

<body>
    <a href="">Link</a>
</body>

</html>

Output:

Link

Set the Color of Visited Links:

To set the color of unvisited links, you can use the: link pseudo-class.

Example:

<html>

<head>
    <style type="text/css">
        a:visited {
            color: #006600
        }
    </style>
</head>

<body>
    <a href=""> link</a>
</body>

</html>

Output:

link

Change the Color of Links when Mouse is Over:

Example:

<html>

<head>
    <style type="text/css">
        a:hover {
            color: #FFCC00
        }
    </style>
</head>

<body>
    <a href="">Link</a>
</body>

</html>

It will produce a link on bringing the mouse over this link color will change to yellow.

Output:

Link

Change the Color of Active Links:

Example:

<html>

<head>
    <style type="text/css">
        a:active {
            color: #FF00CC
        }
    </style>
</head>

<body>
    <a href="">Link</a>
</body>

</html>

Output:

Link