CSS Link

In this tutorial we will learn about CSS Link styling property.

The anchor tag

We use the anchor tag a to create links in HTML.

We can style a link with most of the CSS properties like color, font-size, font-family, background-color etc.

Important states of a link

There are 4 important states of a link and it can be in any one of the state.

• link - when it is unvisited
• visited - when the link has been clicked
• hover - when the mouse is hovering over the link
• active - when the link is being clicked

We use the above states of the link to style it. We use these states as pseudo class.

Style link using the states

In the following example we have set the color of link to blue if it is in :link state i.e., unvisited.

a:link {
	color : blue;
}

In the following example we have set the color of link to red if it is in :visited state.

a:visited {
	color : red;
}

In the following example we have set the color of link to green if it is in :hover state i.e., the mouse is hovering over the link.

a:hover {
	color : green;
}

In the following example we have set the color of link to yellow if it is in :active state i.e., the moment when the link is getting clicked.

a:active {
	color : yellow;
}

Text decoration

By default, each link regardless of its state will have underline with color matching the link text.

To style this we use the text-decoration property. It takes any one of the following value.

• underline (default value)
• none - if we don't want any underline
• overline
• line-through
• blink

In the following example we have set the text-decoration to none.

a {
	color : blue;
	font-size : 120%;
	text-decoration : none;
}

In the following example we have set the text-decoration to overline.

a {
	color : blue;
	font-size : 120%;
	text-decoration : overline;
}

In the following example we have set the text-decoration to line-through.

a {
	color : blue;
	font-size : 120%;
	text-decoration : line-through;
}

In the following example we have set the text-decoration to blink.

a {
	color : blue;
	font-size : 120%;
	text-decoration : blink;
}