Path in CSS

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:

1. a: link - the normal path has not been accessed by the user
2. a: visited - the link has been accessed by the user
3. a: hover - the link that the user hovered over
4. a: active - when clicked

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

1. a: hover must go after a: link and a: visited
2. 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 is used to 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 ; 
 } 

Previous post: Icon in CSS

The following article: List in CSS