How do I display two different styles of link on one page?

The previous solution explained how to style the different selectors of the anchor element, but what if you want to use different link styles within the same document? Perhaps you want to display links without underlines in your navigation menu, yet make sure that links within the body content are easily identifiable.
Or maybe part of your document has a dark background color, so you need to use a light-colored link style there.

Solution
To demonstrate how to create multiple styles for links displayed on one page, let's take an example in which we've already styled the regular links:

a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}

These should be taken as the default link styles , they reflect the way links will normally be styled within your documents. The first rule makes the link blue, so if an area of our page has a blue background, the links that appear in that space will be unreadable. We need to create a second set of styles for links in that area.

First, let's create a class or an id for the element that will contain the differently colored links. If the container is already styled with CSS, it may already have a class or id that we can use. Suppose that our document contains the following markup:

<div class="boxout">
<p>Visit our <a href="store.html">online store</a>, for all your widget needs.</p>
</div>

We need to create a style rule that affects any link appearing within an element of class boxout:

.boxout {
color: #FFFFFF;
background-color: #6A5ACD;
}
.boxout a:link, .boxout a:visited {
text-decoration: underline;
color: #E4E2F6;
background-color: transparent;
}
.boxout a:hover, .boxout a:active {
background-color: #C9C3ED;
color: #191970;
}