Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the color of links in HTML?
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. The 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.
38K+ Views
