If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)


How to add multiple link styles on the same page

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.
  • paintball guns

    I can see that you are putting a lots of efforts into your blog. Keep posting the good work.Some really helpful information in there. Bookmarked. Nice to see your site. Thanks!

    Rating: 5.0. From 1 vote.
    Please wait...
  • Nkole Evans


    No votes yet.
    Please wait...
  • Nkole Evans

    smart n clever!

    No votes yet.
    Please wait...
  • Elena ‘El’ Porres

    life-saver! thanks!

    No votes yet.
    Please wait...
Live Chat
We help you to choose the right product.
Start chat