HTML Link Colors

Web browsers like Google Chrome, Microsoft Edge, Mozilla Firefox etc., automatically set some default colors to HTML links when they are displayed on the web screen if no exclusive CSS is defined for them.

Default colors for HTML links are as follows:

  1. An Unvisited Link:
    The default color for the link that has not yet been visited is displayed in blue with the text underlined.

  2. A Visited Link:
    A link that has been visited or opened is displayed in purple, and the link text stays underlined.

  3. An Active Link:
    By default, browsers show an active link underlined and red.

Change Link Colors

CSS can change the default color of a link.

Let's take an example where we will set the color of an unvisited link to magenta.

HTML Code
<a href="html-tutorial" style="color:magenta;">HTML Tutorial</a>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Color Example</title>
</head>
<body>

<h1>HTML Link Color Example</h1>

<a href="html-tutorial" style="color:magenta;">HTML Tutorial</a>
<p>An unvisited link above has font color in magenta.</p>

</body>
</html>

Remove Underline from Link

Using CSS we can remove the default style of underlining from the anchor text.

The text between the opening <a> and closing </a> tag is called anchor text.

HTML Code
<a href="html-tutorial" style="text-decoration: none;">HTML Tutorial</a>
Example
<!DOCTYPE html>
<html>
<head>
<title>Remove Underline from Link Example</title>
</head>
<body>

<h1>Remove Underline from Link</h1>

<p>Below is a link with underline.</p>
<a href="html-tutorial">HTML Tutorial</a>
<p> Below is a link with no underline.</p>
<a href="html-tutorial" style="text-decoration: none;">HTML Tutorial</a>

</body>
</html>

Here to remove the underline from an unvisited link we have set the value of the text-decoration property to none in the style attribute.

Change Link Background Color

We can change the background color of a link by using the style attribute on link element <a>.

We need to define the color in the background-color property.

HTML Code
<a href="html-tutorial" style="background-color: ivory;">HTML Tutorial</a>
HTML Code
<a href="html-tutorial" style="text-decoration: none;">HTML Tutorial</a>
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Link Background Color Example</title>
</head>
<body>

<h1>Change Link Background Color</h1>

<p>Below is a link with no background color.</p>
<a href="html-tutorial">HTML Tutorial</a>
<p> Below is a link with background color set to green.</p>
<a href="html-tutorial" style="background-color: green;">HTML Tutorial</a>

</body>
</html>

Let's take an example where we will use internal CSS to change the color of an unvisited link to Brown, a visited link to orange and an active link to violet.

The link will not have an underline for both unvisited and visited links, but we will style an active link as underlined.

We also want to style the link for mouse over (hover), i.e. when the mouse pointer comes over the link, the link text should turn green and underlined.

Example
<!DOCTYPE html>
<html>
<head>
<title>Change Unvisited, Visited, Active & Hover Link Color Example</title>

<style>
a:link {
  color: brown;
  text-decoration: none;
}

a:visited {
  color: orange;
  text-decoration: none;
}

a:hover {
  color: green;
  text-decoration: underline;
}

a:active {
  color: violet;
  text-decoration: underline;
}
</style>

</head>
<body>

<h1>Internal CSS to Change Link Color</h1>

<p>Below is a link whose default color is changed using internal CSS.</p>
<a href="html-tutorial">HTML Tutorial</a>

</body>
</html>

Link as Button

With CSS styling, we can turn a link created using HTML element <a> to look like a button.

CSS
<style>
a:link, a:visited {
  background-color: #26518f;
  color: white;
  padding: 18px 28px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

a:active, a:hover {
  background-color: teal;
  text-decoration: none;
  color: white;
}
</style>
Result

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.