CSS Links

In CSS, you can style links (<a> tags) to change their appearance based on different states such as normal, hovered, active, and visited.

Basic link states

1. Normal (a): The default state of the link.

a {
    color: green; /* you can put any color value */
}

2. Visited (a:visited): When the link has been visited.

a:visited {
    color: purple;
}

3. Hover (a:hover): When the mouse is over the link.

a:hover {
    color: red;
}

4. Active (a:active): When the link is being clicked.

a:active {
    color: yellow;
}

Text Decorations Property

text-decoration: none

a {
    color: green; /* you can put any color value */
    text-decoration: none;
}
a:visited {
    color: purple;
    text-decoration: none;
}
a:hover {
    color: red;
    text-decoration: none;
}
a:active {
    color: yellow;
    text-decoration: none;
}

text-decoration: underline

a {
    color: green; 
    text-decoration: underline;
}
a:visited {
    color: purple;
    text-decoration: underline;
}
a:hover {
    color: red;
    text-decoration: underline;
}
a:active {
    color: yellow;
    text-decoration: underline;
}

Background color Property

a {
    color: green; 
    background-color: LightBlue;
}
a:visited {
    color: purple;
    background-color: LightBlue;
}
a:hover {
    color: red;
    background-color: LightBlue;
}
a:active {
    color: yellow;
    background-color: LightBlue;
}

CSS Links – Interview Questions

CSS Links – Objective Questions (MCQs)

Related CSS Links Topics