@codeswithpankaj

CSS Links

CSS Links Tutorial - codeswithpankaj.com

CSS provides a variety of properties to style links, making them an integral part of web design. This tutorial will cover link states, text decoration, color, background color, and hover effects.

1. Link States

Links can be styled differently depending on their state. There are four states of a link:

  • a:link - A normal, unvisited link.

  • a:visited - A link the user has visited.

  • a:hover - A link when the user mouses over it.

  • a:active - A link the moment it is clicked.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Link States - codeswithpankaj.com</title>
    <style>
        a:link {
            color: blue;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https://codeswithpankaj.com">Visit codeswithpankaj</a>
</body>
</html>

In this example, the link changes color based on its state.

2. Text Decoration

The text-decoration property is commonly used to remove the underline from links or add other text decorations.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Decoration - codeswithpankaj.com</title>
    <style>
        a {
            text-decoration: none;
            color: blue;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <a href="https://codeswithpankaj.com">Visit codeswithpankaj</a>
</body>
</html>

Here, the underline is removed from the link, but it appears when the link is hovered over.

3. Color

The color property changes the text color of the link.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Link Color - codeswithpankaj.com</title>
    <style>
        a {
            color: green;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://codeswithpankaj.com">Visit codeswithpankaj</a>
</body>
</html>

In this example, the link color is set to green and changes to red when hovered.

4. Background Color

The background-color property can be used to change the background color of links.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Link Background Color - codeswithpankaj.com</title>
    <style>
        a {
            background-color: yellow;
            color: black;
            padding: 5px;
            text-decoration: none;
        }
        a:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <a href="https://codeswithpankaj.com">Visit codeswithpankaj</a>
</body>
</html>

Here, the link has a yellow background that changes to orange when hovered.

5. Hover Effects

Links can have various hover effects to make them more interactive.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Link Hover Effects - codeswithpankaj.com</title>
    <style>
        a {
            color: blue;
            text-decoration: none;
            transition: color 0.3s, background-color 0.3s;
        }
        a:hover {
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
    <a href="https://codeswithpankaj.com">Visit codeswithpankaj</a>
</body>
</html>

In this example, the link changes color and background color with a transition effect when hovered.

This tutorial covers essential CSS properties for styling links. For more tutorials and examples, visit codeswithpankaj.com.

PreviousCSS IconsNextCSS Lists

Last updated