CSS3 Links

« Previous Lesson

Next Lesson »

CSS3 Links

With CSS, we can apply different styles to links. This tutorial will teach you everything you need to know about CSS3 links.

Styling CSS3 Links

We can apply different CSS properties to links such as color, font-family, text-indentation, text-decoration, and background.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Links
    </title>
    <style>
        a {
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <h1>Applying colors to links</h1>
    <p><b><a href="https://www.vishacademy.com" target="_blank">Welcome to our web development course</a></b></p>
</body>
</html>

The output of this code will be

CSS3 Links

Furthermore, links can be styled depending on their current status.

The four main links status are:

a: link – a normal unvisited link
a: visited – a link that the user has visited
a: active – represents a link at the moment when the user clicks it.
a: hover – represents a link when the user mouses over.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        a:link {
            color: blue;
        }
        a:visited {
            color: cornsilk;
        }
        a:hover {
            color: crimson;
        }
        a:active {
            color: cyan;
        }
    </style>
</head>
<body>
    <h1>Styling a links depending on their state</h1>
    <p><b><a href="https://www.vishacademy.com">Welcome to our free online learning academy</a></b></p>
</body>
</html>

The output of this code will be

CSS3 Links

While specifying styles for link states, you should follow some rule

Always define a: hover after a: link and a: visited
Specify a: active after a: hover.

Text-Decoration

The Text-decoration property overwrites the link default styling.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Links
    </title>
    <style>
        a:link {
            text-decoration: none;
        }
        a:visited {
            text-decoration: none;
        }
        a:hover {
            text-decoration: overline;
        }
        a:active {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Styling a links depending on their state</h1>
    <p><b><a href="https://www.vishacademy.com">Welcome to our free online learning academy</a></b></p>
</body>
</html>

The output of this code will be

CSS3 Links

If you would like to learn more about decoration text, visit our CSS3 Text section.

Background Color for CSS3 Links

Background color defines color for CSS3 links.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        a:link {
            background-color: greenyellow;
        }
        a:visited {
            background-color: darkgoldenrod;
        }
        a:hover {
            background-color: darkorchid;
        }
        a:active {
            background-color: fuchsia;
        }
    </style>
</head>
<body>
    <h1>Styling a links depending on their state</h1>
    <p><b><a href="https://www.vishacademy.com">Welcome to our free online learning academy</a></b></p>
</body>
</html>

The output of this code will be

CSS3 Links

Link Button

We have combined different CSS properties to display the link as a button in an example displayed below.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        a:link,
        a:visited {
            background-color: lightpink;
            color: whitesmoke;
            padding: 15px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }
        a:hover,
        a:active {
            background-color: violet;
        }
    </style>
</head>
<body>
    <h1>Link buttons</h1>
    <p>Styling a link as a button</p>
    <a href="https://www.vishacademy.com">Welcome to Vish Academy</a>
</body>
</html>

The output of this code will be

CSS3 Link

The example below demonstrates how to add different cursors to interactively to the link.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Links
    </title>
    <style>
        a:link,
        a:visited {
            background-color: lightpink;
            color: whitesmoke;
            padding: 15px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }
        a:hover,
        a:active {
            background-color: violet;
        }
    </style>
</head>
<body>
    <h1>The cursor property</h1>
    <a href="https://www.vishacademy.com" style="cursor: crosshair;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: auto;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: default;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: e-resize;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: help;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: move;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: n-resize;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: ne-resize;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: nw-resize;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: pointer;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: progress;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: s-resize;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: se-resize;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: text;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: w-resize;">Start Learning today</a>
    <br><br>
    <a href="https://www.vishacademy.com" style="cursor: wait;">Start Learning today</a>
</body>
</html>

The output of this code will be

CSS3 Links

External Sources

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

Next Lesson » « Previous Lesson