24) Styling Links.css

1) Overview:
Links can be styled in many different ways using properties like color, background-color, border, padding, text-decoration and so on!

Example:
a {
  margin-right: 30px;
  font-family: sans-serif;
}
#first {
  color: tomato;
}
#second {
  color: teal;
  text-decoration: none;
}
#third {
  padding: 12px 15px;
  text-decoration: none;
  color: darkgreen;
  background-color: lightgreen;
}
#fourth {
  padding: 12px 15px;
  text-decoration: none;
  color: orange;
  border: 1px solid;
}

2) Whenever we need, margin-top & margin-bottom but isn't happening, write: display: inline-block;

3) using States:
We can change the appearance of links not only like the normal elements but also depending on some user actions. 
Like when the user takes their cursor over the link, or just when the user clicks the link or based on whether the link was previously visited or not. 
For this, we use the following link states:

i) a:visited - Applies if the link was visited previously

ii) a:hover - Applies when the user takes the cursor over the link

iii) a:active - Applies when the link is just clicked

Here, a:visited, a:hover and a:active are called Pseudo-class selectors.
a:active must be specified after a:hover and a:hover must be specified after a:visited for the styles to take effect.

4) Using ID Selector with Pseudo-classes:
#download-link:hover {
  background-color: green;
}

5) Using Class Selector with Pseudo-classes:
.btn-accept:hover {
  background-color: green;
}
.btn-decline:hover {
  background-color: red;
}