Home > Article > Web Front-end > How to change link color in CSS?
How to change link color in CSS?
- WBOYforward
- 2023-09-10 08:17:04696browse
Links refer to HTML anchor elements, represented by the 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 the "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;
}
The Chinese translation of Example
is: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 a specific link, we can use class selector or ID selector. For example, if we have a class called "special-link" on some links, we will use the following code to change the color of these links −
.special-link{
color:blue; (By using class seletor)
}
#special-link{
color:blue; (By using id seletor)
}
The Chinese translation of Example
is:Example
This is an example of changing the link color in CSS using the "ID" and "Class" selectors.
<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 the “: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 link's color to red when the mouse is hovering over it.
The Chinese translation ofExample
is:Example
This is an example of using the ".hover" pseudo-class in CSS to change the color of a link.
<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>
in conclusion
Changing the color of links in CSS is a simple and effective way to enhance the visual effect of your website. By using selectors, pseudo-classes, and attributes, we can target specific links or link states and change their color to match the design.
The above is the detailed content of How to change link color in CSS?. For more information, please follow other related articles on the PHP Chinese website!