Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change Link Color in CSS
To change link color in CSS, is a very simple process. We will be understanding different approaches to change link color in CSS. In this article, we are having various links, our task is to change link colors using CSS.
Approaches to Change Link Color in CSS
Here is a list of approaches to change link color in CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Changing Link Color using CSS Selectors
To change link color in CSS, we will be using CSS selectors like element selector, id selector and class selector to select the link and CSS color property to chang it's color.
- We have used anchor tag to create hyperlinks in our HTML document.
- In example 1, we have used element selector to change the link color using CSS color property.
- In example 2, we have used id and class selector with CSS color property to change the link color.
Example 1
In this example we have used "a" selector to change link color in CSS.
<html>
<head>
<style>
a{
color:#ab352c;
}
</style>
</head>
<body>
<h3>
To Change Link Color in CSS
</h3>
<p>
In this example, we are using <strong>element
</strong> selector to change link color in
CSS.
</p>
<h4>
Here is a list of tutorials of front-end
technologies available on <a href="/https/www.tutorialspoint.com/index.htm"
target="_blank">Tutorialspoint</a>.
</h4>
<ul>
<li><a href="/https/www.tutorialspoint.com/html/index.htm" target="_blank">
HTML</a></li>
<li><a href="/https/www.tutorialspoint.com/css/index.htm" target="_blank">
CSS</a></li>
<li><a href="/https/www.tutorialspoint.com/tailwind_css/index.htm" target="_blank">
Tailwind CSS</a></li>
<li><a href="/https/www.tutorialspoint.com/javascript/index.htm" target="_blank">
Javascript</a></li>
<li><a href="/https/www.tutorialspoint.com/reactjs/index.htm" target="_blank">
ReactJS</a></li>
</ul>
</body>
</html>
Example 2
In this example we have used id and class selector to change link color in CSS.
<html>
<head>
<style>
#special-link {
color: red;
}
.special-link {
color: green;
}
</style>
</head>
<body>
<h3>
To Change Link Color in CSS
</h3>
<p>
In this example, we are using <strong>id
</strong> and <strong>class</strong> selector
to change link color in CSS.
</p>
<a id="links" href="/https/www.tutorialspoint.com/index.htm">
Change the link color with ID Selector in CSS
</a>
<br>
<a class="links" href="/https/www.tutorialspoint.com/index.htm">
Change the link color with CLASS Selector in CSS
</a>
</body>
</html>
Changing Link Color Based on State
In this approach to change link color in CSS, we will be changing link color based on it's different states. Links have four states which are:
- a:link: It represents a normal link.
- a:visited: It represents the link which has been visited by the user.
- a:hover: It represents link when mouse cursor is hovered over it.
- a:active: It represents the linkat the moment of click.
Example
In this example, we have created an unordered list of tech links using ul and li tag and we are changing link colors based on the states of the link using CSS color property.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link {
color: #04af2f;
text-decoration: none;
}
a:visited {
color: #eb2c4c;
}
a:hover {
color: #fdf91e;
}
a:active {
color: #c63af1;
}
</style>
</head>
<body>
<h3>
To Change Link Color in CSS
</h3>
<p>
In this example, we are representing each
state of link with different color.
</p>
<h4>
Here is a list of tutorials of front-end
technologies available on <a href="/https/www.tutorialspoint.com/index.htm"
target="_blank">Tutorialspoint</a>.
</h4>
<ul>
<li><a href="/https/www.tutorialspoint.com/html/index.htm" target="_blank">
HTML</a></li>
<li><a href="/https/www.tutorialspoint.com/css/index.htm" target="_blank">
CSS</a></li>
<li><a href="/https/www.tutorialspoint.com/tailwind_css/index.htm" target="_blank">
Tailwind CSS</a></li>
<li><a href="/https/www.tutorialspoint.com/javascript/index.htm" target="_blank">
Javascript</a></li>
<li><a href="/https/www.tutorialspoint.com/reactjs/index.htm" target="_blank">
ReactJS</a></li>
</ul>
</body>
</html>
Conclusion
To change link color 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. Here we have used CSS selectors and various link states to change link color.
6K+ Views
