Path in CSS: Tips and Examples

With CSS, the path can be styled very differently.

Style the path

The path is styled using features like color, font-family, background…

 a { 
  color : hotpink ; 
 } 

In addition, the path is also styled differently depending on their status.There are 4 states of the path, including:

• a: link - the normal path has not been accessed by the user
• a: visited - the link has been accessed by the user
• a: hover - the link that the user hovered over
• a: active - when clicked

When styling the path according to the path state, it is necessary to follow some rules:

• a: hover must go after a: link and a: visited
• a: active must go after a: hover

Text Decoration

text-decoration often used to remove underscores from paths.

 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 helps select the background color for the path.

 a:link { 
  background-color : yellow ; 
 } 
 
 a:visited { 
  background-color : cyan ; 
 } 
 
 a:hover { 
  background-color : lightgreen ; 
 } 
 
 a:active { 
  background-color : hotpink ; 
 } 

Advanced - click on the link button

Here is an advanced example of combining some CSS properties to display the path as a box / button.

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