IMG-LOGO
Home Course Links Styling in CSS

Links Styling in CSS

by MH RISHAD - 11 Jan 2021
IMG

Links can be styled with any CSS property

{
  color
: hotpink;
}

In expansion, joins can be styled in an unexpected way depending on what state they are in. The four joins 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
: red;
}

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

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

/* selected link */
a:active 
{
  color
: blue;
}

 

When setting the fashion for a few interface states, there are a few arrange 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:

Example

a:link {
  background-color: yellow;

}


a:visited {
  background-color: cyan;

}


a:hover {
  background-color: lightgreen;

}


a:active {
  background-color: hotpink;

}
 

Link Buttons

This case illustrates a more progressed case where we combine a few CSS properties to show joins 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;

}

 

 

More Examples

Example

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;}

Example

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;

}

Thank You

Share:

Leave a Comment

Required fields are marked *

Stay Connected

Subscribe

Get all latest content delivered to your email free.