Skip to main content

CSS Links

Links can be styled in many different ways with CSS.

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example:

a {  
	color:  darkorange;  
}

In addition, links can be styled differently depending on what state they are in.

The four links states are:

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

Example

/* unvisited link */  
a:link {  
	color:  darkorange;  
}  
  
/* visited link */  
a:visited {  
	color:  green;  
}  
  
/* mouse over link */  
a:hover {  
	color:  red;  
}  
  
/* selected link */  
a:active {  
	color:  blue;  
}
note

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Text Decoration​

The text-decoration property is mostly used to remove underlines from links:

Example

a:link {  
	text-decoration:  none;  
}  
  
a:visited {  
	text-decoration:  none;  
}  
  
a:hover {  
	text-decoration:  underline;  
}  
  
a:active {  
	text-decoration:  underline;  
}

Background Color​

The background-color property can be used to specify a background color for links:

a:link {  
	background-color:  darkorange;  
}  
  
a:visited {  
	background-color:  yellow;  
}  
  
a:hover {  
	background-color:  lightgreen;  
}  
  
a:active {  
	background-color:  red;  
}

What follows is a more advanced example where we combine several CSS properties to display links as boxes/buttons:

a:link, a:visited {  
	background-color:  #f44336;  
	color:  white;  
	padding:  14px 25px;  
	text-align:  center;  
	text-decoration:  none;  
	display:  inline-block;  
}  
  
a:hover, a:active {  
	background-color:  red;  
}

Output:

Example Links as Boxes/Buttons

More Examples​

This example demonstrates how to add other styles to hyperlinks:

a.one:link {color:  #ff0000;}  
a.one:visited {color:  #0000ff;}  
a.one:hover {color:  #ffcc00;}  
  
a.two:link {color:  #ff0000;}  
a.two:visited {color:  #0000ff;}  
a.two:hover {font-size:  150%;}  
  
a.three:link {color:  #ff0000;}  
a.three:visited {color:  #0000ff;}  
a.three:hover {background:  #66ff66;}  
  
a.four:link {color:  #ff0000;}  
a.four:visited {color:  #0000ff;}  
a.four:hover {font-family:  monospace;}  
  
a.five:link {color:  #ff0000;  text-decoration:  none;}  
a.five:visited {color:  #0000ff;  text-decoration:  none;}  
a.five:hover {text-decoration:  underline;}

Another example of how to create link boxes/buttons:

a:link, a:visited {  
	background-color:  white;  
	color:  black;  
	border:  2px solid green;  
	padding:  10px 20px;  
	text-align:  center;  
	text-decoration:  none;  
	display:  inline-block;  
}  
  
a:hover, a:active {  
	background-color:  green;  
	color:  white;  
}

This example demonstrates the different types of cursors (can be useful for links):

<span style="cursor: auto">auto</span><br>  
<span style="cursor: crosshair">crosshair</span><br>  
<span style="cursor: default">default</span><br>  
<span style="cursor: e-resize">e-resize</span><br>  
<span style="cursor: help">help</span><br>  
<span style="cursor: move">move</span><br>  
<span style="cursor: n-resize">n-resize</span><br>  
<span style="cursor: ne-resize">ne-resize</span><br>  
<span style="cursor: nw-resize">nw-resize</span><br>  
<span style="cursor: pointer">pointer</span><br>  
<span style="cursor: progress">progress</span><br>  
<span style="cursor: s-resize">s-resize</span><br>  
<span style="cursor: se-resize">se-resize</span><br>  
<span style="cursor: sw-resize">sw-resize</span><br>  
<span style="cursor: text">text</span><br>  
<span style="cursor: w-resize">w-resize</span><br>  
<span style="cursor: wait">wait</span>

Table of Contents