CSS – Set Background Color for Link

To set specific background color for hyperlink element with tag a, using CSS, set background-color property with required color value in style(inline/external).

Example

In the following HTML script, we have set background colors yellow, rgb(255, 163, 132), and hsl(190, 46%, 63%) for hyperlink elements with ids a1, a2, and a3 respectively.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #a1 {
                background-color: yellow;
            }
            #a2 {
                background-color: rgb(255, 163, 132);
            }
            #a3 {
                background-color: hsl(190, 46%, 63%);
            }
        </style>
    </head>
    <body>
        <a>Default Link</a><br><br>
        <a id="a1" href="#">Link 1</a><br><br>
        <a id="a2" href="#">Link 2</a><br><br>
        <a id="a3" href="#">Link 3</a>
    </body>
</html>

Conclusion

In this CSS Tutorial, we learned how to set background color for hyperlink element(s) using CSS.