CSS Styling Links

HTML anchor tags or links can be styled with any CSS property like color, font, border, etc. A link has four different states — unvisited, visited, active and hover. These four states of links can be styled differently using CSS pseudo-classes.

CSS Pseudo-classes associated with anchor tag are:

a:link - Set styles for a normal or unvisited link that has no mouse pointer over it.

a:visited - Set styles for a link the user has visited, but no mouse pointer on it.

a:hover - Set styles for a link when the user places the mouse pointer over it.

a:active - Set styles for a link that is being clicked, before releasing the mouse button.

Example 1: CSS Styling links

a:link {    /* unvisited link */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* visited link */
    color: #00FF00;
}
a:hover {    /* mouse over link */
    color: #FF00FF;
    border-bottom:5px dashed;
    padding-bottom:5px;
}
a:active {    /* active link */
    color: #0000FF;
}

Note: The order of the pseudo classes should be in the following: :link, :visited, :hover, :active, :focus in order for these to work properly.

Standard Link Styles

In all major web browsers, links on the web pages have underlines and use the browser's default link colors, the default link colors in web browsers like Firefox, Chrome are — blue for unvisited, purple for visited and red for the active link.

Example 2: CSS border-collapse

<style>
    .link1:link, .link1:visited {
        background-color: #4336f4;
        color: white;
        padding: 12px 22px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }
    .link1:hover, .link1:active {
        background-color: blue;
    }
    .link1:active,.link2:active{
        color: black;
    }
    .link2:link, .link2:active{
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-left: 20px;
    }
    .link2:hover, .link2:active{
        background-color: #4CAF50;
        color: white;
    }
    .link2:active{
        color: black;
    }
</style>
<body>
    <a href="/html/index.php" target="_blank" class="link1">HTML Tutorial</a>
    <a href="/css/index.php" target="_blank" class="link2">CSS Tutorial</a>
</body>