CSS Link Styling

A link is a clickable element that connects different web pages. For example,

Default Link Styled Link

The above example shows the default link and a link with CSS style.


A link is created using the <a> element. For example,

 <a href="#">Default Link</a>

Browser Output

Default Link

The above example shows the default link that doesn't look good without any styles.

Note: By default, links are in blue text with underlining. When clicked or in the active state, the link color turns red, and visited links have purple text.


CSS text-decoration Property

The text-decoration property is used to remove the default underlines from links. For example,

a {
    text-decoration: none;
}

Browser Output

text-decoration: none

Default Link

Here, the text-decoration property removes the default underline from the link.

Note: The text-decoration property accepts values such as none, underline, overline, line-through, and blink to control various text decoration styles or remove them.


We can use different CSS properties to style our link. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS link styling</title>
    </head>

    <body>
        <a href="#">Click here</a>
    </body>

</html>
a {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: Monospace;
    text-align: center;
    color: white;
    background-color: purple;
}

Browser Output

Click here

In the above example,

  • text-decoration: none removes the underline from link
  • padding: 10px 30px adds padding to the link
  • border-radius: 8px.rounds the link borders by 8px
  • font-family: Monospace defines the font family of the button text
  • text-align: center aligns the text in the center
  • color: white sets the text color to white
  • background-color: blue adds a purple color to link background

Links can be styled differently based on their states using the following pseudo-classes.

  • :link: default and unvisited link
  • :visited: link visited by user
  • :hover: link with mouse over it
  • :focus: link that is currently focused
  • :active: link that has just been clicked

Let's see an example,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Link States</title>
    </head>

    <body>
        <p>Link having default state styles.</p>
        <a href="#">Default Link State</a>
        <p>Link having updated state styles.</p>
        <a href="#" class="new">Styled Link State</a>
    </body>
</html>
/* styles the default link*/
a.new:link {
    color: green;
}

/* styles the unvisited link */
a.new:visited {
    color: green;
}

/* styles the link on being hovered */
a.new:hover {
    color: blue;
}

/* styles the link while clicked */
a.new:active {
    color: red;
}

Browser Output

Link having default state styles.

Default Link State

Link having updated state styles.

Styled Link State

In the above example,

  • a:link unvisited link has green color
  • a:hover link has blue color on hover
  • a:visited visited link has green color
  • a:active link has red color when clicked

Note: The link states must be in this specific order :link, :visited, :focus, :hover and :active for proper CSS stylings.


Links can also be styled as a button. For example,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Links as Button</title>
    </head>

    <body>
        <a class="first-link" href="#">Submit</a>
        <a class="second-link" href="#">Delete</a>
    </body>
</html>
a {
    text-decoration: none;
    border: 1px solid black;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    font-family: "Courier New", Courier, monospace;
    color: white;
    padding: 10px;
    margin-left: 10px;
    margin: 20px;
    text-align: center;
    cursor: pointer;
}

a.first-link {
    background-color: green;
}

a.second-link {
    background-color: red;
}

a.first-link:hover {
    background-color: blue;
}

a.second-link:hover {
    background-color: purple;
}

a:active {
    color: rgba(255, 255, 255, 0.4);
}

Browser Output

Submit Delete

The above example shows the link as a button.


We can style an image as the link. For example,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS Image Link</title>

    <body>
        <p>Menu Items</p>
        <ul>
            <li>Tea</li>
            <li>Coffee</li>
            <li>Soup</li>
        </ul>
        <p>
            Read our full menu here: <br>
            <a href="#"><img src="https://cdn-icons-png.flaticon.com/512/4813/4813075.png" alt=""></a>
        </p>
    </body>

</html>
img {
    max-width: 80px;
    border: 2px solid;
    background-color: aliceblue;
}

a:hover {
    color: blue;
}

Browser Output

Styling Image as a Link

Menu Items

  • Tea
  • Coffee
  • Soup

Read our full menu here:

In this way, we can style the image as a link.


Cursor Property

The cursor property is used to add different cursors in our links such as pointer, help, wait, etc. For example,

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS Cursors</title>
    </head>

    <body>
        <p>You can have additional information from <a href="#">here</a>.</p>
    </body>

</html>
a:hover {
    cursor: help;
}

Browser Output

You can have additional information from here .

In this way, we can change the cursor of the link when it is being hovered.


Creating Navigation Bar

Let's use different link properties to create a navigation bar,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />

        <title>CSS Navigation</title>
    </head>

    <body>
        <h2>Navigation Bar</h2>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </body>
</html>
/* common styles for all links */
a {
    font-size: 18px;
    text-decoration: none;
    padding: 8px 12px;
    margin-right: 12px;
    border: 1px solid black;
    border-radius: 5px;
    transition: all 0.3s ease;
    background-color: purple;
    color: white;
}

/* styles links while mouse is hovered over */
a:hover {
    background-color: orange;
}

/* styles links while being clicked */
a:active {
    color: blue;
}

Browser Output

Navigation Bar

Home About Contact

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges