html

How to Style Links Using CSS?

Links are entities that indicate new locations. These hyperlinks or links play a vital role in websites when you want your users to visit other content available online. These either denote content available within the same website or content available on other websites. Now we know how significant it is to make your website look visually pleasing, therefore, styling hyperlinks is as important as styling any other element on your website. You must be pondering how to do that. Well, hold on tight because this post will guide you all about styling links.

How to Style Links?

Links or hyperlinks on a website can be styled using various CSS properties. Styling links can include changing their color, font size, font family, etc.

Example
Suppose you want that a hyperlink on your website should have a bold style and its color should be green. Use the following piece of code.

<style>
a {
    font-weight: bold;
    color: green;
}
</style>

Output 

The color and the font-weight of the link have been changed successfully.

Styling links according to states

Links displayed on a website have different states and they can be styled based on their current state. The different states that a link can have are;

a:link (a link that has not yet been visited by the user)

a:visited (a link that has been visited by the user)

a:hover (the state of the link when a mouse cursor is moved over the link)

a:active (the state of the link when user clicks on the link)

Styling links according to their states is necessary because they let the user understand the condition of a link and prevent the user from facing any confusion.

Example
Use the following code snippet to style links on your website according to their state.

<style>
    /* unvisited link */
    a:link {
        color: rgb(255,0,0);
    }
    /* visited link */
    a:visited {
        color: rgb(0,255,0);
    }
    /* mouse over link */
    a:hover {
        color: rgb(255,105,180);
    }
    /* active link */
    a:active {
        color: rgb(0,0,255);
    }
</style>

Output

  1. When the link is not visited by the user yet.
  2. When the user visits the link.
  3. When user brings the mouse over the link.
  4. When the user clicks on the link.

Note: When styling multiple links, maintain the above-mentioned order so that your links behave accordingly. Let’s suppose you style hover first instead of styling visited then the style defined for visited will override hover style and this is a situation that one must avoid.

How to remove the default underline from hperlinks

By default there is an underline on links in a website which can sometimes be unwanted. You can get rid of the underline from links using the text-decoration property of CSS. The following code snippet shows how it can be done.

<style>
    /* unvisited link */
    a:link {
        color: hotpink;
        text-decoration: none;
</style>

In the above example, the default underline is being removed from an unvisited link by setting the value of the text-decoration property to “none”. You can use the above code snippet to remove an underline from other states of a link as well.

Output

The default underline is successfully removed from the unvisited link.

Links as Buttons

Sometimes the usual text links appearing on a website can be boring, therefore, in order to make them more attractive, you can make links appear as buttons on your website. Making links as buttons utilizes multiple CSS properties such as padding, border, background-color, etc.

The example below illustrates how you use links as buttons.

<style>
a:link, a:visited {
    color: white;
    background-color: green;
    text-align: center;
    display: inline-block;
    padding: 15px 30px;
    border: 1px solid #bb;
    text-decoration: none;
}

a:hover, a:active {
    background-color: red;
}
</style>

In the above code snippet, a link is being displayed as a button. The unvisited and visited states of the button are being styled differently from the hover and active states of the link.

Output

  1. The unvisited and visited state of the button link.
  2. The hover and active states of the button link.

A link in all of its states is designed successfully as a button.

Conclusion

Styling links or hyperlinks on a website is as equally important as styling any other element. For the purpose of styling links, various CSS properties are used such as color, background-color, font-family, font-style, etc. Links can also be styled according to their states which are unvisited, visited, hover, and active, moreover, to enhance the look of links appearing on websites, you can use links as buttons. This write-up discusses how to style links using CSS in depth with the help of appropriate examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.