• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Make WP Simple

WordPress Tutorials

  • Blog
  • Getting Started
  • Tutorials

8 Ways to Style Links So They Stand Out

March 3, 2016 Uncategorized 42 Comments

This post may contain affiliate links, which means I will receive compensation if you click through and make a purchase.

8 Simple Ways to Style Your Links So They Stand Out

As a blogger you want people to engage with your content. Whether that’s leaving a comment, sharing a post, or even clicking a link, you want them to take action.

When it comes to links though, it’s easy to take them for granted. After all, you just link some text and you’re done. It’s pretty much common sense what a link does, so what can you really do to get people to click?

There are marketing methods you can use to get those clicks, but what if you could simply draw more attention to the link? Make it more obvious that yes, that text is indeed clickable.

A big problem I see on many blogs are links that don’t look like links. The reader only knows they’re there when hovering over them. That’s a big no-no.

Links are calls to action. To get people to take action you need to make sure they know an action is available!

The simple solution? Making your links stand out! Below I’m sharing 8 ways to style your links so they get noticed, and thus clicked.

1. Add Color

By far one of the best ways to style a link is to add color! When the majority of your text is black, adding a pop of color here and there via a link is sure to make it noticed.

When customizing your site, it’s important to remember that any old color will not do. You want to make sure the link color you choose coordinates with the rest of your brand. Otherwise your links will stand out, but not in a good way.

Also, keep contrast in mind. A dark color that’s almost black isn’t going to provide much indication that the link is any different from the rest of a paragraph. And if you go too light, there won’t be enough contrast between the white background and your text.

Mariah of Femtrepreneur uses a fun red color to make her links stand out:

style-links-colored

To change the color of the links on your site, take a look at your theme’s stylesheet and find the following:

a {
     color: #000000;
}

Change the value next to color. That’s it!

Quick Tip — If you change the color value of a and nothing changes, it’s likely that the links within your posts are controlled by another element. Scroll through your stylesheet and look for a line similar to .content a or .entry a. That’s where you’ll want to change the color value. Same goes for the rest of the tips below.

Need help choosing a color? Check out one of these color tools:

  • 0to255
  • Adobe Kuler

2. Make it Bold

Another way to add contrast to your links is to make them bold! The same way that color helps make text stand out, bolding a link works the same way.

To make a link bold, add the following:

a {
     font-weight: bold;
}

or if you’re using a font that has different font weights, use this instead:

a {
     font-weight: 700;
}

Make sure to use the proper font weight as not all fonts include the same font weights. For example, Open Sans has weights of 300, 400, 600, 700, and 800. If your text is 400, using 600, 700, or 800 would be good choices for links.

3. Add an Underline

Underlining link is probably one of the most intuitive ways to get the point across that some text is linked. By default, all links are styled with an underline, meaning if you were to remove your stylesheet from your site, each and every link would contain an underline. As such, it’s pretty common to assume that any underlined text is a link. So what better way to callout those links?

To underline your links, use this code:

a {
     text-decoration: underline;
}

Another more unconventional way to add an underline to a link is to add a border to the bottom. This method gives you a bit more flexibility when it comes to how the underline is displayed.

On Kory’s blog, she utilizes a bottom border on her links. Notice how there is more of a gap between the text and the underline? This can be done by adjusting the padding of the link.

style-links-underline

Here’s the code you’ll need to add a border to your links:

a {
     border-bottom: 1px solid #000;
     padding-bottom: 2px;
}

You can adjust any of the above settings to suite your needs.

Quick Tip — You don’t just have to stick with a solid border. You can try one of these options for a more unique approach:

  • dotted
  • dashed
  • double

4. Style with Italics

Italicizing your links is an easy, yet often overlooked way to style links.

Jamie of Spruce Rd has italicized her links. They stand out, yet seamlessly fit with the rest of her site’s design.

style-links-italic

Here’s how you can accomplish that:

a {
     font-style: italic;
}

5. Make it All Caps

To take this whole link customization further, what about making them all caps? Odds are your blog posts aren’t written in all caps (they shouldn’t be!), so adding a sprinkling of all caps via your links is a sure way to make them stand out.

If you take a look at my blog posts, you’ll notice my links are styled in this way.

Here’s how you can transform your links to all caps:

a {
   text-transform: uppercase;
}

6. Use Another Font

Yet another way to highlight those links is to use another font. This method can be a mess if not done well, so keep the following tips in mind:

Choose a font that’s easy to read. Your body font is likely on the smaller end of the size spectrum. Those fancy display fonts aren’t going to be easy to read at such a small size. Stick with serif or sans-serif fonts for ultimate readability.

For maximum cohesiveness, choose a font from the same font family. A condensed or black version of your font will stand out, without being too different.

Using myself as an example, my links aren’t actually the same font that the rest of my body text is. I chose a font that was similar enough that it wouldn’t stand out like a sore thumb, but different so that I get the contrast I wanted.

7. Add a Background Color

Perhaps one of my favorite ways to make a link stand out is to add a background color! This method really makes a link stand out.

Just check out Caroline’s links:

style-links-bg-color

There’s no way you’re not missing those!

If you’re familiar with my tutorial on styling a link to look like a button, the technique is pretty much the same. All you have to do is add a background color and maybe some padding. You also might want to adjust the font color for maximum readability.

a {
     background-color: #37fcf8;
     color: #000;
     padding: 1px;  
}

8. Combine!

I’ve saved the best for last! For maximum results, combine any two (or more!) of the above methods for links that really stand out. You may have noticed that in the majority of the above examples, the links featured were colored, even if that wasn’t what we were focusing on. That’s because color really does play a big part in differentiating a link from the surrounding text.

So feel free to mix and match. How about a bold red link? Or maybe an italic link with a subtle background color? The sky’s the limit.

If you use this tutorial to style your links, let me know! I want to see what styles you come up with!

Tweet64
Pin223
Share
287 Shares

Reader Interactions

Comments

  1. LisaLDN says

    March 3, 2016 at 7:29 am

    Luckily my links are both underlined and coloured – thanks to my theme 🙂 I’m not sure if I’d remember to style them all for every post, haha. #Lazy

    Reply
    • Allyssa Barnes says

      March 3, 2016 at 1:35 pm

      That’s what themes are for! Too much work to style them individually 🙂

      Reply
  2. Monica Galvan says

    March 3, 2016 at 8:11 am

    It’s a pet peeve of mine when I can’t tell a link of a site 😐 I have to take time to hover and ugh, don’t make me work too hard! lol 🙂

    Reply
    • Allyssa Barnes says

      March 3, 2016 at 1:35 pm

      YES! It’s like “is this a link or not?” It should be blatantly obvious!

      Reply
  3. Krista says

    March 3, 2016 at 10:04 am

    Love these tips! Links are SO easy to miss so it’s super important to make them stand out. There are definitely a few ways I hadn’t considered in here 🙂

    Reply
    • Allyssa Barnes says

      March 3, 2016 at 1:36 pm

      Exactly! Make it obvious!

      Reply
  4. Bijee says

    March 3, 2016 at 8:23 pm

    When I changed he a link css it changes it for all links. But there is no content a or entry a.. ?

    Reply
    • Allyssa Barnes says

      March 4, 2016 at 10:20 am

      It might also be .post a. If there isn’t any, you’ll have to use an inspector tool, such as Chrome inspect element or Firebug, to find out what classes are being targeted for your posts. Then you can use the appropriate class.

      Reply
  5. Kory says

    March 4, 2016 at 8:01 am

    Awh! I’m glad you included mine so I know I’m doing something right, haha! I did go back recently and make my Click to Tweet links stand out a bit more against the rest of the post text because it’s like you said: if you want someone to take action, they have to actually see the link or call to action 🙂

    Reply
    • Allyssa Barnes says

      March 4, 2016 at 10:21 am

      Exactly! Make things noticeable and people will take action! 🙂

      Reply
  6. Maru says

    March 4, 2016 at 4:29 pm

    Great post, Allyssa! I really like the idea of using all caps or adding a background color. Very unique!

    Reply
    • Allyssa Barnes says

      March 8, 2016 at 1:51 pm

      Thanks, Maru!

      Reply
  7. Holly says

    March 8, 2016 at 11:04 am

    Such a great post, Allyssa! I think links are something a lot of bloggers forget about – sometimes you can hardly tell they’re there! But there are so many different things to try here and what’s great is that they all really help to build your brand. Mine are in a different colour but I’m definitely going to start putting them in bold now 😉

    Reply
    • Allyssa Barnes says

      March 8, 2016 at 1:52 pm

      Thanks Holly! Having a different color is a must, all the other effects are a bonus 🙂

      Reply
  8. Heide Padilla says

    March 9, 2016 at 9:53 am

    It’s really cool that you even included css codes for every tip. I love playing around with html and changing things on my blog every once in a while and these are definitely going to come in handy. Thanks!

    Reply
    • Allyssa Barnes says

      March 9, 2016 at 10:02 am

      Thanks Heide!

      Reply
  9. Sofie says

    March 14, 2016 at 4:13 pm

    This is such a great idea! Even if I have an editor (WordPress) I still forget to make things stand out. This article not only reminded me to do so but really inspired me to think of better ways on how to make them stand out.
    Thank you!

    Reply
    • Allyssa Barnes says

      March 16, 2016 at 11:33 am

      Exactly! If you can get your links styled via CSS, then you can blog without having to remember to style your links. Makes things much simpler 🙂

      Reply
  10. JULIE SPEAR says

    April 6, 2016 at 4:31 pm

    Great info Alyssa!! thanks for sharing, and I am going to attempt to implement this – SO MUCH easier than remembering to “style” each link as you add it to your post, for SURE!!! coding kinda scares me though – I am always afraid I will break something! But I gotta get busy and get this thing going!!! THANKS!!!!

    Reply
    • Allyssa Barnes says

      April 13, 2016 at 8:06 pm

      Thanks Julie! It definitely does make it easier (plus it keeps everything uniform!). It can be scary, but as long as you make a backup, you should be fine. I’ve broken quite a number of sites, but just going for it and testing things out is the best way to learn 🙂

      Reply
  11. RJay Cheleuka says

    May 1, 2017 at 12:07 am

    Hi, this is an enlighten post, I need help, how do I make just the links in my posts come up with my border and NOT the rest of my links in my WordPress??

    Please help me out thanks.

    Reply
    • Allyssa Barnes says

      May 1, 2017 at 9:47 am

      You’ll need to target the class for your posts. So for example, on my site that would be .entry-content a. Yours could be .entry a, .post a, etc. You’ll have to use the inspector to find out exactly what class to target.

      Reply
  12. Owen Kariuki says

    June 30, 2017 at 12:20 pm

    Wonderful tips. Luckily my links are usually a separate color and bold as well. It’s true that most bloggers disregard this issue as a non-entity when it is very important. If there was only a way that links could hover as some sort of animation. 🙂

    Cheers

    Reply
  13. Zlatko says

    July 6, 2017 at 3:01 am

    Great tips — thanks! Perfect for people who like their theme but want to tweak some details like the links.

    Reply
  14. Haley Bradley says

    September 17, 2017 at 6:10 pm

    Thanks so much! I love doing small CSS changes to my theme like customizing my links. It makes me feel like the theme is more mine.

    Reply
    • Jen says

      February 23, 2018 at 8:49 am

      Thank you ! Your post is clear and gets right to the point – I was able to tweak the color of my links and make them jump off my blog in 2 minutes! The color tool links were perfect. Just signed up as a subscriber – keep those tips coming!

      Reply
      • Allyssa Barnes says

        February 26, 2018 at 1:42 pm

        Thanks Jen! So glad you found this post helpful!

        Reply
      • Mausiqi Lyrics says

        January 1, 2020 at 10:17 am

        Thanks a lot, your post helped me a lot.

        Reply
  15. Brooke says

    May 29, 2018 at 12:29 am

    Hi Alyssa! Ummm.. help! I just tried adding the underline, and edited in my Editor… but… it messed up my entire website because I deleted the initial code and now don’t know what to put!

    The underlines I’ve included are now underlining everything in my menu and my logo in the top left hand corner.. as well as every social media icon. *HELP!*

    Reply
  16. Babs says

    June 18, 2018 at 9:10 am

    Made some improvs to your code and it totally worked for me 🙂

    Thanks Allysa.

    Reply
  17. Chris says

    July 27, 2018 at 12:43 pm

    Hey Allysa, thanks for this post. Really helped me out today!

    Reply
  18. Tarik says

    April 16, 2019 at 12:29 am

    Thanks for this post. I was doing some research on another blog and noticed they bold their affiliate links. Bolding your links makes them stand out from the rest of the content and probably helps with CTR. These are some great tips here and I’ve bookmarked your page.

    Reply
  19. Roz Addler says

    May 31, 2019 at 11:28 am

    So helpful!!! Thank you!! I’ve bookmarked this page in case I need it again 🙂

    Reply
  20. Mostmags says

    January 30, 2020 at 4:48 am

    Thanks a lot of post

    Reply
  21. Mostmags says

    February 15, 2020 at 11:22 pm

    Great Article Dude! It’s very informative for bloggers

    Reply
  22. HOP LYRICS says

    April 4, 2020 at 4:48 am

    nice tips man , these tips are really usefull
    visit my website if you ever need song lyrics https://hoplyrics.com/

    Reply
  23. Lyrics kitaab says

    August 31, 2020 at 10:58 pm

    Links are common things on internet your tips make my links stands out from others thanks for sharing this post.

    Reply
  24. Kinemaster lessons says

    August 31, 2020 at 11:00 pm

    Thanks for sharing this info about links very helpful for me I am a new blogger.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Looking for Something?

This site is powered by:

Footer

  • Getting Started
  • Tutorials
  • Tools & Resources
  • Website Strategy
  • All Tips & Tutorials
  • About
  • Subscribe
  • Get Help
  • Contact

© 2021 Italicized Creative LLC. Privacy Policy. Terms of Use.