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 link color in CSS?
A link, refers to the HTML anchor element, represented by the <a> tag. This element is used to create hyperlinks that allow users to navigate between web pages and other resources.
CSS (Cascading Style Sheets), is a powerful language used to control the visual presentation of web pages. One of the most important things we can do with CSS is changing the color of links on the webpage. In this article, we will cover different ways to change the color of links in CSS.
By using "a" selector
This is the basic way to change the color of links in CSS. This selector targets all links on a webpage. The color property is used to change the color of the text of the link. Here is an example −
a{
color:blue;
}
Example
Here is an example to change the link color using “a” selector in CSS.
<html>
<head>
<title>Change link color in CSS</title>
<style>
body{
text-align:center;
}
a{
color:blue;
}
</style>
</head>
<body>
<h2>Change the link color in CSS</h2>
<a href = "https://www.tutorialspoint.com/"> link to tutorialspoint </a>
</body>
</html>
By using "id" and "class" selector
If we want to change the color of just specific links, we can use a class or ID selector. For example, if we have a class of "special-link" on some links, We will use the following code to change the color of those links this −
.special-link{
color:blue; (By using class seletor)
}
#special-link{
color:blue; (By using id seletor)
}
Example
Here is an example to change the link color using “ID” and “Class” selector in CSS.
<html>
<head>
<title>Change link color in CSS</title>
<style>
body{
text-align:center;
}
#special-link {
color: red;
}
.special-link {
color: green;
}
</style>
</head>
<body>
<h2>Change link color in CSS</h2>
<a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with ID Selector in CSS </a>
<p></p>
<a class="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with CLASS Selector in CSS </a>
</body>
</html>
By using ":hover" pseudo-class
To change the color of a link when it is hovered over, we use the ":hover" pseudo-class. For example
a:hover {
color: red;
}
This CSS will change the color of link to red when it is hovered over.
Example
Here is an example to change the link color using “.hover” pseudo-class in CSS.
<html>
<head>
<title>Change link color in CSS</title>
<style>
body{
text-align:center;
}
a {
color: blue;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<h2>Change link color in CSS</h2>
<a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with Mouse-hover in CSS </a>
</body>
</html>
Conclusion
Changing the color of links in CSS is a simple and effective way to enhance the visual of the website. By using selectors, pseudo-classes, and properties, we can target specific links or link states and change their color to match the design.
3K+ Views
