Search within TutorialsPark

CSS Links


To style link Elements based on the states.


CSS Links

1. In a HTML webpage, a link is created using the <a> element, but a link has many states.

2. The states are applied using CSS pseudo class of :link , :visited , :hover , :focus and :active

3. Most browsers have default color of blue for unvisted links and color purple for for visited links. Custom colors can also be used, but the difference between the states must be visible.

The following are the states of any given link

:link To set the style of a hyperlinks that have not been visited yet

:visited To set the style of hyperlinks that have been visited, based on the browser's history.

:hover To style hyperlinks when the mouse pointer hovers over it.

:active To define styles for hyperlink when it is clicked or selected by the user

:focus To define style for hyperlink when the mouse pointer is focused on the hyperlink or element

CSS Example : CSS Links

Give it a TRY! » Note: Developers can also use other style properties other can colors.


Styling CSS Links

1. Different states of hyperlink can be styled using underlines.

CSS Example: Horizontal Navigation

Give it a TRY! »


Creating tooltips for hyperlink using CSS

Hyperlinks can also have styled tooltips when the user hover over the link.

CSS Example: CSS tooltip

Give it a TRY! » Note: You can create tooltips even for Images.