CSS Links

By /

In this chapter, you will learn how to style links using CSS. By default, links usually appear blue and underlined, but CSS allows you to change their color, remove the underline, and add different effects when users interact with them. Let’s see how CSS links can look better.

What is a Link?

In HTML, links are created using the <a> tag. For example:

<a href="https://example.com">Visit Example</a>

By default, the browser applies its own style to links. You can use CSS to change that style.

1. Changing Link Color

The color property is used to change the color of a link.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Link Color</title>

  <style>
    a {
      color: green;
    }
  </style>
</head>

<body>

  <a href="#">Click Here</a>

</body>
</html>

The link will appear in green instead of the default blue color.

2. Removing the Underline

Links are usually underlined by default. You can remove the underline using the text-decoration property.

a {
  text-decoration: none;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>Remove Link Underline</title>

  <style>
    a {
      color: blue;
      text-decoration: none;
    }
  </style>
</head>

<body>

  <a href="#">Click Here</a>

</body>
</html>

The link will appear blue without an underline.

3. Styling Links with :hover

The :hover pseudo-class is used to change the style of an element when the user places the mouse pointer over it. For example:

a:hover {
  color: red;
}

When you move the mouse over the link, its color will change to red.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Link Hover</title>

  <style>
    a {
      color: blue;
      text-decoration: none;
    }

    a:hover {
      color: red;
    }
  </style>
</head>

<body>

  <a href="#">Move Your Mouse Here</a>

</body>
</html>

Try moving your mouse over the link to see the color change.

4. Link States

Links can have different styles depending on their state. CSS provides several pseudo-classes for this:

  • :link – A link that has not been visited.
  • :visited – A link that has already been visited.
  • :hover – A link when the mouse is over it.
  • :active – A link while it is being clicked.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Link States</title>

  <style>
    a:link {
      color: blue;
    }

    a:visited {
      color: purple;
    }

    a:hover {
      color: red;
    }

    a:active {
      color: green;
    }
  </style>
</head>

<body>

  <a href="https://example.com">Visit Example</a>

</body>
</html>

Each state can have a different color. When you interact with the link, you may notice the color changing based on its current state.

5. Creating a Button-Like Link

CSS can also make a normal link look like a button.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Link Button</title>

  <style>
    a {
      display: inline-block;
      background-color: blue;
      color: white;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 5px;
    }

    a:hover {
      background-color: darkblue;
    }
  </style>
</head>

<body>

  <a href="#">Click Me</a>

</body>
</html>

Here, the link looks like a button because of the background color, padding, and rounded corners.

The display: inline-block property allows the link to properly use properties like padding. You will learn more about the display property in a later chapter.

Quick Recap

  • Links are created using the <a> tag in HTML.
  • The color property changes the link color.
  • text-decoration: none removes the underline.
  • :hover styles a link when the mouse is over it.
  • :link, :visited, and :active are used for different link states.
  • CSS can make a link look like a button.

Frequently Asked Questions (FAQs)

Q1. What are CSS links?

CSS links are HTML links styled using CSS. You can change their color, remove underlines, add hover effects, and apply different styles based on the link’s state.

Q2. How to style links in CSS?

You can style links in CSS by changing properties such as color, text decoration, background, padding, and other visual styles.

Q3. How can I change the color of a link using CSS?

You can change the color of an HTML link using the CSS color property and apply different colors for different link states.

Q4. How do CSS hover effects work on links?

A CSS hover effect changes the appearance of a link when a user places the mouse pointer over it. You can change the color, background, or other styles.

Q5. Is CSS link styling easy for beginners?

Yes. CSS links for beginners are easy to understand because you can start with simple styles such as changing colors, removing underlines, and adding hover effects.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top