How do I get different styled links?

So you've set up the styles for the links of your page but you have one section that you want to be different from everything else. To do that, you need to assign a different class or ID.

For example, you might have styled your links like so:


a:link, a:visited {
  color: red;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: green;
  text-decoration: underline;
}
a:visited {
  color: blue;
}

To create a different style we could either attach a class directly to the anchors ( tag) themselves, or we could assign a class or ID to a containing element. The first would look like:


<a class="myLink" href="#">My link 1</a>
<a class="myLink" href="#">My link 2</a>


a.myLink:link, a.myLink:visited {
  color: red;
  text-decoration: none;
  font-weight: bold;
}
a.myLink:hover {
  color: green;
  text-decoration: underline;
}
a.myLink:visited {
  color: blue;
}

The second would look like:


<div id="myDiv">
  <a href="#">My link 1</a>
  <a href="#">My link 2</a>
</div>


#myDiv a:link, #myDiv a:visited {
  color: red;
  text-decoration: none;
  font-weight: bold;
}
#myDiv a:hover {
  color: green;
  text-decoration: underline;
}
#myDiv a:visited {
  color: blue;
}

When to use which will depend on the situation, however, if you have a lot of links, you’re probably better targetting them through the parent element than applying a class to every single one.

Remember in the case of using a parent element to target styles that you need to apply the parent to each different pseudo class (another name for anchor tags), e.g.:
#myDiv a:link, #myDiv a:visited, not #myDiv a:link, a:visited.