Styling Links

/* unvisited link */
a:link {
  color: red;

/* visited link */
a:visited {
  color: green;

/* mouse over link */
a:hover {
  color: hotpink;

/* selected link */
a:active {
//this example demonstrates 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;

Can be styled differently depending on what state they are in: a:link, a:visited, a:hover, a:active.

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.

Additional information

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

Related concepts

Styling Links

Styling Links — Structure map

Clickable & Draggable!

Styling Links — Related pages: