Teach with us

How to change the color of links in HTML?

HTMLWeb DevelopmentFront End Technology

A link is a connection from one Web page to another web page.

We can add page links to a web page. HTML links are hyperlinks. The <a> tag defines a hyperlink and used to link from one page to another. href attribute is used with the <a> tag, which indicates the link's destination.

To make page links in an HTML page, use the <a> and </a> tags, with href attribute used to define the links. We should use the <a>…</a> tags inside <body>…</body> tags.

The link text is visible. Clicking on the link text, will navigate to the specified URL address.

By default, links will appear as follows on web page of the browser.

  • An unvisited link is underlined and blue

  • A visited link is underlined and purple

  • An active link is underlined and red

Syntax

Following is the syntax to make a page link on the web page.

<a href="https://www.Google.com/"> text of the link </a>

We can change the color of the link, using style sheet.

Example

Following is the example program to change color of the link, using CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      a:link {
         color: greenyellow;
         background-color: transparent;
         text-decoration: none;
      }
      a:visited {
         color: deepskyblue;
         background-color: transparent;
         text-decoration: none;
      }
      a:active {
         color: yellow;
         background-color: transparent;
      }
   </style>
</head>
<body>
   <a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" >HTML Tutorial</a>
</body>
</html>

We have changed the color of the link to greenyellow for unvisited link.

We have changed the color of the link to deepskyblue for visited link and yellow for active link.

Example

Following is another example program to change color of the link, using CSS. 

<!DOCTYPE html>
<html>
<head>
   <title>HTML Link Color</title>
</head>
<body>
   <h2>About</h2>
   <p>
      Our <a href="/about/about_team.htm" style="color: red">Team</a> comprises of programmers, writers, and analysts.
   </p>
</body>
</html>

Example

Following is one more example program to change color of the link, using CSS. 

<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
   <style>
      a:link {
         text-decoration: none;
      }
      a:visited {
         text-decoration: none;
      }
      a:hover {
         text-decoration: underline;
      }
      a:active {
         text-decoration: underline;
      }
   </style>
</head>
<body>
<h2>Click the link below to redirect to facebook login page</h2>
<a href="https://www.facebook.com/login/">facebook login</a>
</body>
</html>

After hovering on the link, it will change the styling.

raja
Lokesh Badavath
Updated on 11-Nov-2022 10:51:16

Previous Page Print Page Next Page  
Advertisements