CSS Link

Links can be styled in different ways by use of CSS.

Text Link Text Link Link Button Link Button

Link Style

Links styled can be use with any CSS property (e.g. color, font-family, background, etc.).

Example:-

a {
    color: blue;
 }

Test it Now

There are four links states that is:

a:link :- This is normal & unvisited link.
a:visited:- visited a link by the user .
a:hover :- Mouses over on link
a:active :- Click moment.

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

Test it Now

Text Decoration

text-decoration property is 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;
}

Test it Now

Background Color

background-color property is used to 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;
} 

Test it Now

Link Buttons

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

Test it Now

Next TopicCSS List

← prev next →

CSS Tutorials

CSS Properties

CSS Link

Link Style

There are four links states that is:

Text Decoration

Background Color

Link Buttons