CSS :link

The CSS :link pseudo-class applies styles to links (<a>) that have not yet been visited by the user. It is useful for distinguishing unvisited links from visited ones, especially when combined with the :visited pseudo-class.

The syntax for the :link pseudo-class is:

</>
Copy
selector:link {
    property: value;
}

Where:

ParameterDescription
selectorThe link element (<a>) to which the style will be applied.
propertyThe CSS property to be applied to unvisited links.
valueThe value assigned to the CSS property for unvisited links.

Examples

1. Changing Link Color for Unvisited Links

In this example, the color of unvisited links is set to blue.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:link {
            color: blue;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Unvisited link</a>
</body>
</html>

2. Adding Underline to Unvisited Links

Here, unvisited links are underlined for emphasis.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:link {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Underlined unvisited link</a>
</body>
</html>

3. Changing Font Style for Unvisited Links

In this example, unvisited links are styled with italic text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:link {
            font-style: italic;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Italicized unvisited link</a>
</body>
</html>

4. Changing Font Size for Unvisited Links

This example demonstrates how to increase the font size of unvisited links.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:link {
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Larger unvisited link</a>
</body>
</html>

5. Adding Background Color to Unvisited Links

In this example, a background color of lightblue is applied to unvisited links.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:link {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <a href="https://example.com">Unvisited link with background</a>
</body>
</html>