How to Set Different Styles for Internal Links and External Links

Customizing our internal links with CSS, can be a nice feature for our readers. By doing so, we can make them look different from the external links, so that our readers will know when they are going to click on a link within our blog or when they are going to be taken to another website.

I came up with this thought as I was writing the “5 Simple Hacks to Customize the Twenty Twenty Theme With CSS Only” and leaving many links to the WP Forum that would, of course, take you away from my blog. However, you can use the snippets for any theme.

Let’s break it down.

In this post I’m going to show you how you can, with CSS only:

• set a different color for internal links and external links (that takes readers to another website;
• underline all the links that will open in a new tab;
• remove the underline of the links to your own posts that will open in a new tab (because the accent color plus the underline, I believe it’s too much)

You can customize them as you want, of course; I am simply going to guide you through: 1) what these links are, 2) why the matter and 3) which are the selectors you need to customize them with CSS.

Internal Links Vs. External Links

An internal link is the one that will direct our readers to a post or page within our website; for instance, “Customizing the Twenty Twenty Theme with CSS only” will take you to a post in this blog.

An external link (or “Outbound link”), however, is going to take our readers to another website; for instance, the following will take you to the Twenty Twenty Theme Details at WordPress you must check.

As you can see, I customized those links (with CSS):

• the first one that takes you to a post inside my blog is using the color accent of my theme;
• and the second one that will take you to an outside source is using another color (it goes with the flow of the text, because I want you to stay ☺️).

You may have also noticed that the second link is also underlined: hold that thought.

Why are Links Important? SEO Performance

If you are not using the plugins YOAST SEO or ALL IN ONE SEO, please do so now. With them, you’ll learn that having internal and external links in your posts, are going to help it score best to rank in search engines like Google.

I use YOAST SEO (the free version). Once you install it and activate it, you’ll see in your editor a window at the bottom, a sort of form to fill in with your key phrase and a list of items you may need to check.

For this post you’re reading, under the “SEO” tab of the plugin, I received the following results:

The good thing about YOAST SEO, is that it will also tell you when you’re adding too many internal or external (outbound) links.

To Bear in Mind: Where is the Link and Where it Will Be Opened?

I told you that in my CSS, I customized some links to be underlined and I asked you to “hold that thought.” So, let’s talk about that.

Links Outside my Blog

For the links inside your blog, you already have an accent color (I guess); now, for the links that will take people outside your blog, you can add the following to your CSS:

a[href*="//"]:not([href*="yoursite.com"]) {
	color:#4d79ff;/*this is a pretty nice blue*/
}

What we are doing here is saying that if the active link is not in “yoursite.com”, give it the hex color #4d79ff.

Now, in my case, I chose to give these links the same color of my text. Huge alert here: how will people know they can click on it? I’ll set them to be opened on another tab and customize them, with an underline.

Links That Will Open in Another Tab (The Target Attribute)

I do this frequently because if you procrastinate clicking on every link I leave, I want you to keep my post opened so you can come back to it ?. The links that will open in another tab use the value _blank for the target attribute (This is HTML language)

On WordPress, you don’t need to write the HTML code; instead, simply select your text, add the link and click in “open in a new tab” (after hitting enter)

To customize these links with CSS, add the following (to have them underlined and with a dotted underline):

a[target=_blank] {
	text-decoration:underline;
	text-decoration-style:dotted;
}

Finally, what if you want (like I do) to have links to your posts opened in a new tab but not underlined? For instance, the following link will take you to my archive page of #TwentTwentyTheme on another tab and it’s not underlined.

a[href*="/yoursite.com/"]:not(_blank) {
	text-decoration:none;
}

Easy peasy, right?

To bear in mind: CSS means Cascade Style Sheet; thus, your browser will read your snippets from top to bottom. So, if you change the order of the snippets we worked on today, you’ll need to use the important rule to make them work.

The whole thing, to have it like I do, would end up looking like this:

/* Links to another website that's not my blog */
a[href*="//"]:not([href*="yoursite.com"]) {
	color:#333; /*same color of my text*/
}

/* Links (any kind) that will be opened in another tab */
a[target=_blank] {
	text-decoration:underline;
	text-decoration-style:dotted;
}

/* Links in MY site, that will be opened in another tab */
a[href*="/yoursite.com/"]:not(_blank) {
	text-decoration:none;
}

One last thing: if you wanna make sure your other links won’t be affected (like social icons for instance) in the Twenty Theme, simple add .entry-content at the beginning of each selector.

Give me a high-five if you enjoyed this!

---

More Resources:

• If you want to follow a path to learn how to code, check out the ABC’s in my Coding Toolkit;
• To learn more about the difference between internal and external links, please check what YOAST teaches us about Internal Links and Outbound Links.
• From W3Schools.com, check out this HTML Color Picker;
• Also from W3Schools, learn more about HTML Links (for instance “_blank“, is a value for the target attribute)