Menu Search
Jump to the content X

The Definitive Guide To Styling Web Links


Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas1 put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort.

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

Let’s start by looking at CSS selectors and pseudo-classes:

  • a:link { }
    Unvisited link.
  • a:visited { }
    Visited links.
  • a:hover { }
    The user mouses over a link.
  • a:focus { }
    The user clicks on a link.
  • a:active { }
    The user has clicked a link.

The TLC3 uses not only plaint text links, but also icons to communicate the corresponding file types.

Ensure Contrast Link

Links should stand out not only from the background but from the surrounding text. If the font color is black and the link color is black, you have a problem. Make your links stand out by using one or more than one of the following techniques.

  • text-decoration: underline;
  • font-weight: bold;
  • font-size: 1.4em;
  • color: #ed490a;
  • background-color: #c0c0c0;
  • border-bottom: 2px solid #a959c3;

If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.

Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mind users with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.



A helpful technique that I always use is to slightly blur the focus. Links with good contrast should still stand out when you look at the page.

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.



Use the Title Attribute Link

The title attribute is usually overlooked, but it’s a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.

<a href="" title="This is an example link">Example</a>

Use Button Styles Link

To make really important links stand out—say, a call to action or a “More info” link at the bottom—use a button style. And you can reuse the style again and again without having to edit any graphics.



For more information, check out “Super-Awesome Buttons With CSS3 and RGBA10” and “Call to Action Buttons11.”

Hover State Link

Offering feedback to users that they’re hovering over a link is good practice. The best way to do this is to change the background color, change the text color or remove the underline.

a:hover { text-decoration:none;
text-shadow: 0 0 2px #999;



The mouse pointer usually turns from an arrow into a hand when the user hovers over a link. But this functionality is sometimes lost; for example, in IE when the link contains a span element, or on “Submit” buttons. Fix this by adding the cursor type via CSS.

a:hover span { cursor: pointer }

Active State Link

Provide visual feedback to the user to indicate that they have clicked a link, so that they know to wait. One nice effect is to move the link down one or two pixels, which gives the link the appearance of being pressed.

a:active { padding-top: 2px; }



Apply Padding Link

Here is a good usability tip. Add padding to your links. This way, the user doesn’t have to hover over the exact point of the text. Instead, they can hover in proximity and still be able to click. This works well for navigation links.

a { padding: 5px; }


Use Icons for File Types Link

If your links point to files in various formats, inform the user of as much using icons. This prepares them for the file type they are about to open, whether it’s PDF or JPEG, for example.


For some great resources, check out “Fam Fam Fam Silk Icons18” and “Social Media Mini Icon Pack19.”

Use Icons for Recognition Link

Just as you would use icons for file types, use icons to identify where links go or what they do. This user can more quickly absorb a visual icon than text.



Make Anchor Text Descriptive Link

Use meaningful text, not “Click here.” The problem with the latter is that it forces the user to read around the link to understand why they should “Click here.” Anchor text such as “See Britney on a beach” speaks for itself. It’s also more SEO-friendly.


Always link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.

<h1><a href="/" title="Homepage">Site name</a></h1>
h1 a {
background: url(images/logo.gif) no-repeat top left;
display: block;
text-indent: -9999px;
width: 200px;
height: 60px;

Don’t Open New Windows Link

Just don’t do it. Let the user decide when and where to open a new tab or window. Users expect links to open in the same window. If you really must do it, at least add an icon to show that this will happen. There are exceptions; for example, it you don’t want to break the flow of a check-out process.

Micro-Formats Link

As the Web becomes more semantic, consider incorporating micro-formats into your link structures, to help machines understand how a link fits into a page and its relationship to other pages. For example, the following…

<a href="" rel="friend met">My Friend</a>

tells search bots that this text links to a friend who I’ve met, which is useful for discovering connections between links. You can also read more about micro-formats22.

Komodo Media23


Hicks Design25


Notable App27


UX Booth29


Max Voltar31


Elliot Jay Stocks33


The TLC35


Sam Brown37


Adii Rockstar39


Forty Seven Media41


Stefan Persson43






Simple Bits49


Andy Rutledge51


Brian Hoff53


Simon Collison55


Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62

↑ Back to top Tweet itShare on Facebook

Lee Munroe is a freelance web designer from Belfast. You can see his other writings on web design on his blog.

  1. 1

    Amazing article

  2. 2

    Thank you lee…..

  3. 3

    Good article

  4. 4

    great articles..


    check your website worth

  5. 5

    Nice tips!

  6. 6

    Thanks alot for this good article.

    Sometimes I forget how important links are. *sigh*

  7. 7

    This is a really good article. Proper styling of links is essential if you want a usable and accessible site I think, especially in larger sites. Link padding will become very important with the rise of touch screen devices too in my opinion.

  8. 8

    IMO article should be named “CSS basics: links”…expected something better from SM

    • 9

      You’re right Kiwus, there are a lot of basics in here but wanted to make sure they were covered. I often find the basics are the most important part but are often overlooked (e.g. a:active).

  9. 10

    I meant to give you 5 stars; if they had added padding to the stars rating system I wouldn’t have misclicked on 4. :(

    I agree with codesquid – the stuff in this article is important but will be even more so in the near future, as squashed screens and accessibility concerns become more pervasive.

  10. 11

    Good article however I couldn’t disagree more about opening links in new windows. I’m a big fan of Smashing Magazine however your practice of linking external pages in the same window bothers me excessively. The majority of the posts at Smashing Magazine contain many links to external websites.

    “…we’re discussing an opinion here and to state either practice is ‘wrong’ or ‘right’ itself shows ignorance.” -Jay

    • 12

      Yes, please open a new tab or window for links… It really sucks when you’re reading an article, click a link for further – and future – reading, and your current site is gone…
      Sure, it’s just a click on the ‘back’ button, but it gets annoying, especially if there’s multiple links where you want to check them out later. Sure, you can always use the “open in new tab” feature, but a lot of users don’t – so why take users away from your site by not opening the links in a new tab/window per default..?

    • 13

      i agree. the one thing that bothers me about this site, is that the article links don’t open new windows. very frustrating.

      • 14

        I concur–SM’s practice is annoying in the extreme. Unless SM wants to lose people who go to another link or two and never come back because to do so would mean reloading the entire long page.

      • 15

        I am glad they do not open in a new window. Most browsers have a “open in new tab” function that is typically middle mouse.

        Opening a new browser window is horrible and ends up spawning too many. More tabs good, more windows bad. Just get used to clicking middle mouse, I have since the first tabbed browsers hit the market (and prior to that I opened a new window for every link).

      • 16

        Agree on this point. However, I tend to browse Smashing Mag via an RSS reader which does open new looks.

        Admittedly if I was coming to the front page every day I would find it annoying to constantly open and go back.

        For the web using community at large I would not open new windows, but this site caters for a specific set of individuals who would probably prefer a bit of ‘new window action’.

    • 17

      A quick fix for you to open new tabs is to control click the link.

    • 18

      Agreed! Opening links in a new window is the way to go!

  11. 19

    I don’t know about using the tag for you logo. I used to do it for some time, but I think it makes more sense to reserve the tag for the page title you’re currently viewing.. what’s your opinion about that?

    • 20

      Really good point Patrik and it would be good to get some more opinions on this (especially for any Google/SEO experts).

  12. 21

    Thanks for the Article :)

  13. 22

    Thiago A. Villa Menezes

    February 13, 2010 6:48 am

    Guys, I have been noticing this on a few articles. Maybe you should consider putting a Table of Contents at the beginning of the article linking to anchors. I don’t know, it may kill some of the beauty but I think it’d be helpful. Because I look at the scrollbar and (sometimes) think “oh gosh it’s so tiny, the article must be enormous, I’ll read it later [close window]”, the TOC would help, for the main cause of the scrollbar getting smaller are the comments. Another little thing you could possibly try is putting a bar with fixed:bottom; showing links to the next topic above and below. Don’t know… just ideas =D

    • 23

      Great idea, Thiago. A basic tenet of good communication is to let your audience know what lies ahead. That goes double on the Web, with pages that can scroll forever. Are you listening, Smashing?

  14. 24

    Good article. I’m trying to tighten up my FE game and this helped out a lot. I need to dig more into Micro-Formats.

  15. 25

    Why all blogs keep showing us the same websites? Am I wrong here? I’ve seen some of the above sites on several blogs and in different articles. I know they look or work great, but there are millions of other really great sites to show. Please keep researching in order to show us new things. That will help us and you’ll learn not to be stuck like other lazy blogs as well. Take this in a positive way please. Thanks SM!

  16. 26

    “Don’t Open New Windows” !!! 2 years later and you are still saying that ?

  17. 27

    There’s a typo in the CSS shown in Styling Links Section / Ensure Contrast paragraph
    […] text-DECORTATION: underline; […]

  18. 28

    It’s important to note that a:focus has a much more important role than ‘the user clicks on a link’.

    Focus allows the user to tell when an element has focus. When non-mouse using users visit your site, they’ll navigate with their keyboard (or potentially other devices). Focus affords those users a bit of extra usability. When they tab to a navigation item, your :focus selector will apply.

  19. 29
  20. 30

    Good article!
    It was a reminder for me to go through the style sheet of my site again, looking for stuff that I forgot.
    Guess what: I forgot to link my logo to the homepage.

  21. 31

    No tut about links explains the :target-state. Everybody is making the same :)

  22. 32

    A nice effect can be achieved by using border-bottom instead of text-underline. This gives you control of the color, weight and padding of the underline.

    I first noticed this on the wordpress commercial site and ended up incorporating it into our portfolio site for corknine.

  23. 33

    Janusz Kamieński

    February 13, 2010 2:51 pm

    Really useful tips gathered in one place. Good job! Thank you!

  24. 34

    simple, yet featuring some pretty useful stuff I sometimes forget about ;)

  25. 35

    Matti Schneider-Ghibaudo

    February 14, 2010 2:00 am

    Woops, the very beginning is wrong: the CSS pseudo-selectors do not match the description given.
    :focus is for when the link has keyboard focus (e.g. by tabbing on it)
    :active is for when the link is, well, _active_ (i.e. mouse-clicked or keyboard-activated); as long as the mouse/key is down, the link is active.

    Evidence: .

    There’s also one very important thing regarding accessibility that’s missing here: even more important than styling correctly links is using BOTH :hover and :focus. Most people think of :focus as some kind of very-special-use-case (i.e. custom forms) feature. Not at all: it is also here to describe how users navigating your site using keyboard only will see the selected link. And it is much more important to them to see what’s the currently selected link than to someone who is hovering it with the mouse!

    The rule of thumb is to simply add a :focus version of any :hover rule you’re declaring; however, it is usually worth making the :focus selection stand out even more than the :hover one, because it is more difficult to know where you are when navigating only with keyboard, and the probability that a user navigating only with keyboard has bad sight is higher than for someone using the mouse.

    Example: .

  26. 36

    Thanks for this post, it’s a brilliant reference!

  27. 37

    +5 Insightful, thanks.

  28. 38

    Matti Schneider-Ghibaudo

    February 14, 2010 2:43 am

    Comment system is broken (when posting a new comment, it seems to replace the previous one; would need more serious testing though).
    Previous message:
    Sorry for the double post. “Request deletion” keeps on answering “Request failed”, having given it the following explanation:

    “Double post because my previous comment did not appear; upon trying to repost it, the previous one re-appearead :-s
    I swear I did a text-search on the page before re-trying!”

  29. 39

    you could have talk also about styling some particular extensions (jpg;pdf…) with CSS,
    This would have been really useful here…

  30. 40

    nice and easy to read!
    Will rework my page links!


↑ Back to top