CSS LINKS

With the help of CSS, links can be styled in different ways.

STYLING LINKS

Links can be styled with any CSS property e.g. color, font-family, background, etc. 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

a {

color: hotpink;

}

 

 

/* unvisited link */

a:link {

color: red;

}

 

/* visited link */

a:visited {

color: green;

}

 

/* mouse over link */

a:hover {

color: hotpink;

}

 

/* selected link */

a:active {

color: blue;

}

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.

EXAMPLE

a:link {

background-color: yellow;

}

 

a: visited {

background-color: cyan;

}

 

a:hover {

background-color: lightgreen;

}

 

a:active {

background-color: hotpink;

}

ADVANCED – LINK BUTTONS

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons.

EXAMPLE

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;

}