To demonstrate how to create multiple styles for links, you can take the code used in the article How to create a link that changes color on mouseover with CSS:

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 style should be taken as default one. However if you have an area with a blue background on your Web page, the links will be unreadable, because this link style makes the link blue. In this case you need to create a second set of styles for any link within that area, following the next steps:

1. You should create a CSS rule to affect any link appearing within an area for which the parent element has the class boxout applied:

File Test.css

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;

}

.boxout {

color: #000000;

background-color: #3ADF00;

}

.boxout a:link, .boxout a:visited

{

text-decoration: underline;

color: #F4FA58;

background-color: transparent;

}

.boxout a:hover, .boxout a:active {

background-color: #FF8000;

color: #0101DF;

}

This will display all links in the document as per the first style except those that appear in the boxout—these links will be displayed in the lighter color.

2. You should give a class or an ID to the area which contains the differently colored links. Note: The area will have a class or ID, if it is already styled with CSS, and you can use it. For example your document can contain the next markup:

File Test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to display two different style of link on the same page with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<div>

<p>&#34;The recovery in the labor market is probably going to be more sluggish than the Fed recognizes&#34; said Michael Hanson, senior U.S. economist at Bank of America Corp. in New York and a former Fed economist. He said <a  href=”/quote/FDTR:IND” title=”Get Quote” density=”full”>policy makers</a>  have painted themselves in a bit of a corner, waiting to see a significant improvement in the labor market.&#34;.</p>

</div>

<ul>

<li><a href=”#”>Link one</a></li>

<li><a href=”#”>Link two</a></li>

<li><a href=”#”>Link three</a></li>

<li><a href=”#”>Link four</a></li>

</ul>

</body>

</html>

The next picture shows the result:

Displaying of two different style of link on the same page with CSS

Displaying of two different style of link on the same page with CSS