Styling Links with IDs and Classes

<!DOCTYPE html>
<html>
<head>
    <title>Class and ID Based Links</title>
    <meta charset="UTF-8">

<style>

    a:link, a:visited {
        color: red;
    }

    a:hover {
        color: green;
    }

    a:active {
        color: blue;
    }

    #id a:link, #id a:visited {
        color: orange;
    }

    #id a:hover {
        color: lime;
    }

    #id a:active {
        color: purple;
    }

    a:link.class, a:visited.class {
        color: pink;
    }

    a:hover.class {
        color: black;
    }

    a:active.class {
        color: white;
    }

</style>
</head>

<body>

    <h1><a href="">Link 01 (a)</a><h1>

    <h1 id="id"><a href="">Link 02 (id)</a></h1>

    <h1><a href="" class="class">Link 03 (class)</a></h1>

</body>
</html>