How to change link color in CSS?-CSS Tutorial-php.cn

How to change link color in CSS?

WBOY

Release： 2023-09-10 08:17:04

forward

750 people have browsed it

How to change link color in CSS?

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;
}

Copy after login

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>

Copy after login

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)
}

Copy after login

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>

Copy after login

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;
}

Copy after login

This CSS will change the link's color to red when the mouse is hovering over it.

The Chinese translation of

Example

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>

Copy after login

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!