CSS Links | CSS Tutorial

Links are one of the most important elements of any website. By default, browsers give them a standard blue color and an underline. But with CSS, you can style links to make them look more attractive and user-friendly.

Different Link States

Links can have different states, and CSS allows you to style each one separately:

a:link → Styles a normal, unvisited link.
a:visited → Styles a link that the user has already clicked.
a:hover → Styles a link when the mouse pointer is placed over it.
a:active → Styles a link when it is being clicked.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Hover & Cursor</title>
    <style>
      h1 {
        font-size: 20px;
        color: royalblue;
      }

      a:link {
        color: red;
      }

      a:visited {
        color: green;
      }

      a:hover {
        color: hotpink;
      }
    </style>
  </head>
  <body>
    <h1>CSS tutorials with CodeWithHarry</h1>
    <a href="https://www.codewithharry.com/" target="_blank"
      >Code with Harry website</a
    >
  </body>
</html>

Output: When you open this in a browser:

The link starts as red.
If you’ve visited it before, it will appear green.
Hovering your mouse changes it to hotpink.
Clicking the link will momentarily show it as orange.
And because of target="_blank", it opens in a new tab.

CSS Links Output

Quick Recap

Links in CSS can be styled for different states: link, visited, hover, active.
This improves the user experience and gives your site a polished, professional look.
Always style links to match your website’s theme and make navigation clear.