October 12, 2022

How to Change Hyperlink Color in HTML and CSS

In this tutorial, we will learn how to change hyperlink color in HTML and CSS. As you know, HTML links are hyperlinks, which you can click and go to another link. The anchor element defines a hyperlink with href attribute.

By default, the hyperlink color is blue, but you can change it to a different color if you want to. It is very easy to change the hyperlink color with the use of the CSS color property.

In the following example, we will demonstrate how you can change the hyperlink color using CSS. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have one anchor element with href attribute.
In the head element, we have added a stylesheet (style.css) using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyperlink color</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <a href="https://www.google.com/">google</a>
</body>

</html>

CSS

We are selecting the anchor element and setting the CSS color property value to red. As a result, it will change the default hyperlink color to red.
The CSS font-size property has been used to increase the font of the text. Its value has been set to 30px.

a {
    color: red;
    font-size: 30px;
}

You May Also Like: