Results 1 to 3 of 3

Thread: How to style external links differently than internal links?

  1. #1
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to style external links differently than internal links?

    hi all,

    How can I style external links differently from site links without adding classes?


    Thanks
    Last edited by ddadmin; 01-08-2009 at 12:10 AM.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    1. For example assume that each external links displayed in your site has the following structure:

    Code:
    <span><a href="http://www.google.com>Google</a></span>
    In other words as far as the external links are concerned in your site they'll be represented in the above manner and have a CSS rule like the following in your stylesheet:

    Code:
    span a{color: green}
    span a:hover{color:blue}
    span a:visited{color:red}

    But this method has a major problem if you enclose the anchor element within a span element then it will apply this styles rules on that anchor element that are enclosed within the span element. To avoid this issue you can check the second method.

    2. We still enclose the anchor element(s) that points to the external links within span elements, just to identify them we need a method. Also we use a dummy class name in the span element, so that you can use span elements along with anchor elements even for your domain links but the styles will be applicable only with those anchor elements that are enclosed within span element that has a class name specified by us.

    Code:
    <span class="external"><a href="http://www.google.com>Google</a></span>
    <span><a href="http://www.yoursite.com/page>local page</a></span>
    Code:
    span.external a{color: green}
    span.external a:hover{color:blue}
    span.external a:visited{color:red}
    Please note that here there is a dependency between the span element and the external class name.

    In the above case the first link will be handled with the below mentioned CSS but it will ignore the second anchor element even if it enclosed within span.

    Hope this helps.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You don't need to worry about spans. Just give each link that you want styled differently than the default links a common class name and define it's styles in your stylesheet:

    Code:
    .external {
     color: green;
    }
    .external:hover {
     color: blue;
    }
    .external:visited {
     color: red;
    }
    HTML Code:
    <a class="external" href="http://www.whatever.com/">Whatever</a>
    Last edited by jscheuer1; 01-08-2009 at 08:38 AM. Reason: add code examples
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •