How to Set Different Styles for Internal Links and External Links

Let’s learn how to customize our internal and external links with CSS, why they matter and dig a little bit into the HTML language.

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) I thought that it would be nice for you to know: when you’re clicking to a post that’s in my blog and when you’ll be taken to an outside source. Wouldn’t you like that? I’m talking about internal and external links.

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

  • set a different color for links that takes us 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 what these links are, why the matter and which are the selectors you need to play with CSS.

Internal Links Vs. External Links

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

An external 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?

You know by now that having people to visit your website is a hard, hard job; one must have a schedule, multiple social media and post at least three times a day. Personally, every time I share a post that I’ve already shared, I do it thinking “I’m so, so very sorry that you’re seeing this in your time line again.”

So, promoting our blogs on social media is one step; but having links in our posts is another one, a huge one.

Having links makes us rank better on Google (so they say) Why? Basically, because if we set internal links (from our post to another one of our posts) that will tell Google and search engines that we have a pretty decent site with well structured information.

On a Personal Note

I try to avoid using links among the text as much as I can, because I write for people with ADHD (like yours truly); and, when we see links, we go like “What’s that? I’ll go now!” and we end up with tons of tabs opened forgetting what we were reading in the first place.

So, you may have noticed that in my chronicles for instance, I always leave the links listed as references at the bottom of my posts; this whole blog has my heart and soul in it, but those chronicles are my baby; they are made to build an intimate moment of reflection and fun… so, I want you to stay until the very end.

That being said, let’s customize our links, shall we? (Are you still here?)

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

Processing…
Success! You're on the list.

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.
  • At CSS Tricks, in 2012, Mark Battistella left that first cool selector to customize links to another website;
  • 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)

2 replies on “How to Set Different Styles for Internal Links and External Links”

Any thoughts?