CSS Links

Links are a fundamental part of web navigation. CSS allows you to style links in various ways to make them stand out and provide a better user experience.

Styling Links

You can style links using CSS pseudo-classes to apply different styles for different states of the link.

Link Pseudo-Classes

The most commonly used pseudo-classes for links are:

• :link - Applies to links that have not yet been visited.
• :visited - Applies to links that have been visited by the user.
• :hover - Applies to links when the user hovers over them.
• :active - Applies to links when they are being clicked.

Syntax

The general syntax for styling links is:

/* Link Pseudo-Class Syntax */
a:link {
    /* Styles for unvisited links */
}

a:visited {
    /* Styles for visited links */
}

a:hover {
    /* Styles for links on hover */
}

a:active {
    /* Styles for links when clicked */
}

        

Examples

/* Basic Link Styling */
a {
    text-decoration: none; /* Remove underline */
    color: #1a73e8; /* Link color */
}

a:hover {
    color: #e91e63; /* Change color on hover */
    text-decoration: underline; /* Underline on hover */
}

            

/* Visited Link Styling */
a:visited {
    color: #6c757d; /* Color for visited links */
}

            

/* Active Link Styling */
a:active {
    color: #ff5722; /* Color for active links */
}

            

/* Navigation Bar Link Styling */
.navbar a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem 1rem;
}

.navbar a:hover {
    background-color: #f8f9fa;
    color: #007bff;
}