CSS Links

CSS provides a versatile array of styling options for links, allowing for diverse and creative customization, as you can see in the below preview.

Styling Links

Links offer extensive styling capabilities through CSS, enabling customization with properties such as color, font-family, background, and more. For example:

a {
  font-family: Roboto;
  color: orangered;
  text-decoration: none;
  border: 2px solid orangered; 
  background-color: #fff;
}

The above CSS code will make the link element look like the preview below. 

Link States

Links can vary in appearance based on their different states. There are four primary states for links:

1. a:link: Represents a normal, unvisited link.
2. a:visited: Represents a link that the user has previously visited.
3. a:hover: Represents a link when the user hovers over it.
4. a:active: Represents a link at the moment it is being clicked.

You can style the link element differently for the above states. For example, you can specify a different color for each of these states, as shown below.

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: black;
}
a:hover {
  color: green;
}
a:active {
  color: brown;
}

Link States Order

When defining styles for multiple link states in CSS, there are specific order rules to follow:

a:hover should be declared after a:link and a:visited.
a:active should be declared after a:hover.

These rules ensure that CSS prioritizes the correct styling for each link state, maintaining consistency and expected behavior when users interact with the links.

Text Decoration

The text-decoration property is commonly utilized to customize the visual appearance of text, including the removal of underlines from links.

a {
  text-decoration: none;
}

In this example, the text-decoration: none; rule ensures that links (<a> elements) do not display an underline by default.

Background Color

The background-color property is effective for defining a background color, specifically for links. 

a {
  background-color:orangered;
  color: white; 
  text-decoration: none;
}

Link Buttons

You can also style link elements to look like buttons. For example: 

a.button {
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: white;
  background-color:orangered;
  border-radius: 10px;
}

The preview of the above code will look like a button, as shown in the below preview.

Please check below options for the links to our previous or next tutorial.