CSS for links (link, visited, hover, active).

Like other elements links can be also style using CSS. When you hover the mouse on the links in Facebook, you will see underlined link. You may also seen changed link color of visited links on Google. These all things can be done using CSS.

Styling Links.

You can use all CSS properties related to text to style links.

Links can be found in four states.

  • Link.
  • Visited.
  • Hover.
  • Active.

These states are also called as pseudo classes. Pseudo classes can be written along with corresponding element using colon “:”.

Link (a:link).

Can be written as a:link. Its a default state of link. This state of links can be found for unvisited links.

Example.

a:link
{
color: red;
}

Visited (a:visited).

Can be written as a:visited. These links are the links clicked by you and can be seen when the webpage is visited again. You can style visited links by following example.

Example.

a:visited
{
color:violet;
text-decoration: italic;
}

Hover (a:hover).

Can be written as a:hover. Specified style will be activated when mouse pointer is being hovered on the targeted link. Facebook uses following example for the link at hover state.

Example.

a:hover
{
text-decoration: underline;
}

Active (a:active).

Can be written as a:active. Specified style will activate when left mouse button clicked and remain active till left mouse button released on targeted link.

a:hover
{
background-color:red;
}

Live CSS link example.

Above pseudo classes can be also used for images.

Comments

comments