How to style external links differently than internal links?

[brown123]

hi all,

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


Thanks

[codeexploiter]

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

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

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.

<span class="external"><a href="http://www.google.com>Google</a></span>
<span><a href="http://www.yoursite.com/page>local page</a></span>

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.

[jscheuer1]

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:

.external {
 color: green;
}
.external:hover {
 color: blue;
}
.external:visited {
 color: red;
}

<a class="external" href="http://www.whatever.com/">Whatever</a>