11 Jul CSS Links

Styling of links is quite important for any website. The hyperlinks should be clearly visible to every user and should be given a proper styling. Here, we will learn about CSS links.

Links have some states, such as hover when you place the mouse cursor over it, visited means the link you have visited, active when a link is clicked, and the link is an unvisited link that will be visible to users.

Here, we will see the following states with examples:

• Set the color for a link (:link)
• Visited Link Color (:visited)
• Hover Link Color (:hover)
• Active Link Color (:active)
• Link Color

Set the color for a Link (:link)

The following is an example to show how you can set the color for a link. The :link is the state when it is not clicked i.e. unvisited:

Here’s the output,

Visited Link Color (:visited)

The following is an example showing how to set the color of the links already visited by the user. The :visited is the state for the link a user visited:

Here’s the output,

Hover Link Color (:hover)

Here, with hover, set the hover link color. As in the following code, whenever you will hover the mouse cursor over the link, it will show you the link color #6dc430.

The :hover is the state when the user keeps the mouse cursor on the link:

Here’s the output,

Active Link Color (:active)

Here, set the active link color. The :active is the state when the link is clicked. Let us see an example:

Here’s the output,

Link Color

We saw before how to work around CSS links i.e. adding hover link color, visited link color, etc.

Use the following color property to change the color of links. Let us see an example:

Here’s the output,