CSS: Applying styles to hyperlinks

This entry is part 8 of 26 in the series Basic CSS

By default in most browsers, text hyperlinks display as underlined blue text and visited hyberlinks display as underlined purple text.

You can try out the link here.  Notice that it becomes purple after you have clicked on the link.

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Hyperlinks</title>
</head>
<body>

<a href='//nytimes.com'>Click Me</a>

</body>
</html>

If we apply a class to all hyperlinks, it will not provide a way to distinguish between the visited links and the unvisited links.

To differentiate between visited and unvisited links, we can use pseudo-classes.

We do not need to apply anything to the individual hyperlink tags within the <body> section to use pseudo-classes.  Simply create the style rule in the <style> section for the the pseudo-classes and the browser will apply that rule throughout the document.

For example, to make all visited links magenta and all unvisited links navy blue:

<!DOCTYPE html>
<html>
<head lang='en'>
        
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Hyperlinks</title>
    <style type='text/css'>
        a:link {
            color: navy
        }

        a:visited {
            color: magenta
        }
    </style>
</head>
<body>

<a href='//nytimes.com'>Click Me</a>

</body>
</html>