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)

captcha

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

    smart!

    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...