{"id":1694,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/working_with_html\/Advanced\/article9.html"},"modified":"2011-03-23T03:52:43","modified_gmt":"2011-03-23T07:52:43","slug":"how-add-multiple-link-styles-the-same-page","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-add-multiple-link-styles-the-same-page.html","title":{"rendered":"How to add multiple link styles on the same page"},"content":{"rendered":"Q:<\/span> How to add multiple link styles on the same page?<\/span>\r\n\r\nA:<\/span> We can define a link style that is only active in a certain area of the page by using context dependent selectors.\r\nRather 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. \r\nFor example: <\/span>\r\n
<html>\r\n<head>\r\n<style type=”text\/css”>\r\n.body A:link {color: #ff6600; text-decoration: none}\r\n.body A:visited {color: #0000ff; text-decoration: none}\r\n.body A:active {color: #0000CC; text-decoration: none}\r\n.body A:hover {color: #6699cc ; text-decoration: underline; color: red;}\r\n\r\n.body2 A:link {color: #0000CC; text-decoration: underline overline}\r\n.body2 A:visited {color: #0000CC; text-decoration: underline overline}\r\n.body2 A:active {color: #0000CC; text-decoration: underline overline}\r\n.body2 A:hover {color: #0000CC; text-decoration: underline; color: green;}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\nONE TYPE OF LINKS\r\n<br\/>\r\n<span class=”body”>\r\n<a href=”http:\/\/www.yahoo.com”>YAHOO<\/a>\r\n<br\/>\r\n<a href=”http:\/\/www.google.com”>GOOGLE<\/a>\r\n<\/span>\r\n<br\/>\r\n<br\/>\r\nANOTHER TYPE OF LINKS\r\n<br\/>\r\n<span class=”body2″>\r\n<a href=”http:\/\/www.yahoo.com”>YAHOO<\/a>\r\n<br\/>\r\n<a href=”http:\/\/www.google.com”>GOOGLE<\/a>\r\n<\/span>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/div>\r\nNote how we use the <span> to define the context.\r\nThis is smart for two reasons:\r\n
    \r\n\t
  • \r\n
      \r\n\t
    • It allows us to use different link styles on the same page, rather than being limited to using a single overall link style.<\/li>\r\n\t
    • 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.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>","protected":false},"excerpt":{"rendered":"

      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 […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256],"tags":[514,2411,517],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1694"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1694"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1694\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}