CSS Links

With CSS, links can be styled in many different ways.

Styling Links

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

Example

Output :

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

Here, we want to use a font named "Trirong" from Google Fonts:

Output :

When setting the style for several link states, there are some order 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

Output :

Background Color

The background-color property can be used to specify a background color for links:

Example

Output :

Link Buttons

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

Example

Output :

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Output :

Example

Another example of how to create link boxes/buttons:

Output :

Example

This example demonstrates the different types of cursors (can be useful for links):

Output :

---