- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
How to add multiple link styles on the same page
November 15, 2010
Q: How to add multiple link styles on the same page?
A: We can define a link style that is only active in a certain area of the page by using context dependent selectors.
Rather than addressing the A: link selector, we will define an outer area that is separate from the area where we’d like our link style to be effective.
For example:
<html>
<head>
<style type=”text/css”>
.body A:link {color: #ff6600; text-decoration: none}
.body A:visited {color: #0000ff; text-decoration: none}
.body A:active {color: #0000CC; text-decoration: none}
.body A:hover {color: #6699cc ; text-decoration: underline; color: red;}
.body2 A:link {color: #0000CC; text-decoration: underline overline}
.body2 A:visited {color: #0000CC; text-decoration: underline overline}
.body2 A:active {color: #0000CC; text-decoration: underline overline}
.body2 A:hover {color: #0000CC; text-decoration: underline; color: green;}
</style>
</head>
<body>
ONE TYPE OF LINKS
<br/>
<span class=”body”>
<a href=”http://www.yahoo.com”>YAHOO</a>
<br/>
<a href=”http://www.google.com”>GOOGLE</a>
</span>
<br/>
<br/>
ANOTHER TYPE OF LINKS
<br/>
<span class=”body2″>
<a href=”http://www.yahoo.com”>YAHOO</a>
<br/>
<a href=”http://www.google.com”>GOOGLE</a>
</span>
</body>
</html>
Note how we use the <span> to define the context.
This is smart for two reasons:
-
- It allows us to use different link styles on the same page, rather than being limited to using a single overall link style.
- We can define entire areas where a certain link style is applied. Thus, we don’t have to add a style definition to each and every link in that area.