Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Definitive Guide To Styling Links With CSS

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.

Further Reading on SmashingMag: Link

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 TLC 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 RGBA7” and “Call to Action Buttons8.”

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 Icons9.

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 window10. 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 microformats11 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 microformats12.

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

↑ Back to top Tweet itShare on Facebook

Lee Munroe is a web developer and creator of based in San Francisco.

  1. 1

    Amazing article

  2. 2

    Thank you lee…..

  3. 3

    Good article

  4. 4


    February 13, 2010 5:19 am

    Thanks alot for this good article.

    Sometimes I forget how important links are. *sigh*

  5. 5

    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.

  6. 6

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

    • 7

      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).

  7. 8

    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.

  8. 9

    Dominic Businaro

    February 13, 2010 6:27 am

    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

    • 10

      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..?

    • 11

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

      • 12

        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.

      • 13

        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).

      • 14

        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’.

    • 15

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

    • 16

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

  9. 17

    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?

    • 18

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

  10. 19

    Thanks for the Article :)

  11. 20

    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

    • 21

      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?

  12. 22

    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.

  13. 23

    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!

  14. 24

    Michael Stanford

    February 13, 2010 9:21 am

    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.

  15. 25

    Nice tips!

  16. 26

    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.

  17. 27

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

  18. 28

    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.

  19. 29

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

  20. 30

    Janusz Kamieński

    February 13, 2010 2:51 pm

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

  21. 31

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

  22. 32

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

  23. 33

    +5 Insightful, thanks.

  24. 34

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

  25. 35

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

  26. 36

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

  27. 37

    really useful, thank you very much! great post

  28. 38

    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.

    This sort of throwaway advice does more to harm accessibility than aid it because it leads to people adding titles to all their links where the title says exactly the same thing as what’s already in the link text which means that screenreader users have to listen to the same piece of content twice.

    Only use the title attribute if you need to expand on what is said in the link text or if you use the same link text for links that point to different destinations (e.g ‘read more’ links).

    I’d also argue that the HTML you’ve presented for linking to the logo is wrong. I believe a logo is content and should be in the HTML (with appropriate alt attribute in place), not using a CSS image replacement technique. Think about what you’d want the page to look like with styles off or when printed – do you still want the logo to appear as a logo or text?

  29. 39

    Thank you man! I’ve just read trough the whole article with a smile on my face :).

  30. 40

    I never thought about adding a white text shadow to make a link glow! What a wonderful idea.

  31. 41

    Good article, but I just don’t agree with one point: «Don’t Open New Windows». I think you should open new windows if the link is an external link. So your website lays beneath the linked site.

    I know many webunsave people who close the browser window of an external link if they wanna go back to your website. So if the link wasn’t opened in a new window, your website would be gone and the user would have to restart the browser and type your URL in again. And you know how lazy people are.

    I guess it’s Utopia to think that common people know how to open links in a new window or new tab or whatever they like. They just click on the link and expect the website to do something beautiful.

    So I would say: «Open links in new windows if the link is an external one. If it’s an internal link do never open it in a new window!»

    • 42

      Even I, as an experienced web user, accidentally close windows although the link I just clicked didn`t open a new one. Most of the time I am aware of this problem and click on “open link in new tab”, but sometimes that still happens – which pissed me off. And I really don`t want to know how many, still important, windows get closed by not so experienced users when they like to go back to the website they just came from. In the end I am more of an “open links in new windows” guy.

  32. 43

    Nice Article..Really I Like it

  33. 44

    >>>”Don’t Open New Windows”
    Good point! Loved it.

  34. 45

    Good article – but one thing I’m not sure about.

    Under ‘Link Your Logo’ you say to use the H1 tag for your logo to link back to the home page.
    I recently read from a Google expert that you should never hide the text for the H1 tag (ie, text-indent -9000px) as Google thinks you could be hiding stuff to fool their bots.

    I would recommend just using a “p” tag, or even simpler an “a” tag for the logo.

    • 46

      is that true? I always use the h1-tag for the logo. Can you link the article you read?

    • 47

      That’s really interesting Andy, I’ve been wondering what Google’s perspective was on this. If you have the link to that article that’d be super.

    • 48

      I read the same article (and some others on the same point). You should always use the “img” tag (wrapped in an “a” tag, so you can link back to the home page) for the logo and the “h1” tag for the page title, unless you really want your site name to be a major keyword for searches. In most cases it’s more desirable to keep the page title in an “h1” tag. Take for example, this site. I bet most new visitors will be arriving on this site searching for words in an article’s title and not by typing in “Smashing Magazine” in Google.

      For people concerned about semantics, it is best practice to make the “h1” tag contain basically the same as the “title” tag:

      Which brings up my point again. You usually keep a descriptive title in the “title” tag and not just your site name/branding, don’t you? :)

  35. 49

    Really useful article, thank you

  36. 50

    nice round up about links… thank you
    I really like the komodomedia-website… this is one of the website where you can see the love for the details of the designer

  37. 51

    Sometimes it’s good to focus on the basics — not everybody is an advanced CSS coder and even if they are, the basics are often overlooked.

    I’d like to see more people not forgetting about the :focus state, which is quite important if you’re using the keyboard to navigate between links. It’s often forgotten and it adds a nice usability feature for keyboard users.

    Perhaps it would have been good to mention that the pseudo-classes have to be specified in that order, otherwise there will be specificity problems?

    Also, another often discussed issue is whether the underline on links should be added via the text-decoration property or a border-bottom, so that descenders aren’t covered by the underline.

  38. 52

    Cool article thanks.

    I would just add that instead of using padding around links to make them have a larger invisible hit area, I would make my css read:


    this makes the invisible hit area around the link more exact in dimension without having to guess with padding. Also, if you have vertical nav links, it is good that this way is perfectly exact.


  39. 53

    Nice article.
    I think is the appropriate place to say that Smashing Magazine should follow its own advice and start open links to other sites that are presented in the articles as new tabs or windows because “you don’t want to break the flow” of the user that reads an article. It’s amazing how many times it happened to me or to my colleagues that after checking one of the examples we automatically closed the tab/window only to discover that the article is also gone…
    An icon indicating that the link leads to a new tab or window would also be nice.

  40. 54

    I don’t see what the big issue is with opening a link in another window or tab? I prefer this and implement ‘_blank’ in my designs.

    I hate it when im on site ‘A’, then when i click on a link which directs me away to site ‘B’, if im interested in the content of site ‘B’ and start navigating through the pages, i then have to click the browser’s ‘back’ button loads of times to return to site ‘A’

    I don’t wish to have users leave my site through links, instead open another window thus always leaving my site available for the user.

  41. 55

    Agree strongly on not overlooking changing the a:visited properties. WordPress Codex is the worst violator of this premise; I can’t tell you how much time I have wasted clicking on links to very similarly worded pages that I have already clicked on. I actually go into Firebug and add an a:visited property to avoid wasting my time.

  42. 56

    Chris Andrikanich

    February 15, 2010 9:46 am

    Thanks for the info, learned a couple of new very useful tips to help my link styles. Keep up the great work.

  43. 57

    I couldn’t agree more about the impotence of “click here.” I recently ran an experiment on several sites that compared “click here” links to links with keywords. After a week, Google associated the keywords with the pages they linked to. That is, if the link said “able” and the page said “betsy,” then searching the sites for “able” found both of them. But searching for “click here” only found “click here.”

  44. 58

    “Red won’t stand out to someone who is color blind, ”

    Are you aware of how colour blindness works?!

  45. 59

    Andreas Ostheimer

    February 15, 2010 3:58 pm

    Love the tip with the “Apply Padding” – forgot about that ;-)

  46. 60

    great article, thanks
    couldn’t agree more

  47. 61

    wow, tell the bots via micro-format about a ‘friend met’ – very interesting. have to find out more bout that.
    Great posting.

  48. 62

    I wonder, why designers rarely use :visited on links, sometimes it’s annoying (on wiki-style sites or tutorials sites), so I have to write custom css for sites that I visit often.

    I found that when site background is bright, it’s better to use blue-coloured links (dark-violet for visited links), and when background is dark, orange links look cool (pale yellow for visited).

  49. 63

    Firstly, all of you guys bitching and complaining about the links on this site not opening a new window need to realize something; there is an equal number of us who absolutely hate it when links open new windows—but we have a good reason for it. What is that reason you ask? Consistency. I don’t know about you guys but I like to be able to expect. I expect that when I click any link it will open in the window I am currently in. I don’t like to be surprised—having a 50/50 chance of the link opening in a new window. Luckily by control-clicking links I can rely on them always opening in a new tab, regardless of what is specified in the HTML. Similarly if I knew that links would always open a new window I could adjust my browsing behavior accordingly. What seems more logical to you guys, links which always open a new window, or links which simply take you to the linked content in the view you are currently in? Yes, there are cases where opening a link in a new window makes more sense, to you, or me, but maybe to someone else it doesn’t—the point is it should be up to the user (you, me, and the other guy) to decide when we would like a link to open in a new window, tab, or in the same window. Personally I applaud Smashing Mag for sticking to what’s right—giving us control.

    Now, about the color of links. Although the links in this very article are as you say they should be, i.e., seperated from their surroundings by color and underline, what about the other links present on the page? I’ve struggled with this a number of times myself. The links in the footer, for example, are all grey and have no underline… oh wait, not all! The “Sven Lennartz & Vitaly Friedman” and “Back to top” links are underlined and blue, but not the links of each category. Why? What about the links in the Interact and Popular bar? They too only become obvious links only once the user rolls over them. From a visual standpoint I understand all of these decisions… but how and why do we justify them?

  50. 64

    Pam Griffith

    March 7, 2010 1:33 pm

    I’ve been wondering lately if there are any guidelines for making links stand out with css audio properties. Are the any consistent defaults there along the lines of “links are underlined and blue” and “don’t make them sound like X or users will think they are something else”?

  51. 65

    I think its a great article thanks

  52. 66

    Coral Lacorte

    October 14, 2011 9:34 am

    What’s Going down i’m new to this, I stumbled upon this I’ve discovered It absolutely useful and it has aided me out loads. I hope to contribute & assist different customers like its aided me. Good job.

  53. 67

    Interesting thing about Opera is that there’s an option in preferences to underline visited links and it seems to be checked by default, so the browser applies ‘text-decoration: underline’ for visited links even if you specify ‘text-decoration: none’ for ‘normal’ link. No other browser seems to do it.

    You have to literally declare ‘text-decoration: none’ for visited links if you declared it for ‘normal’ state using ‘a:link’. See the code below.
    a:link { color: #e63e62; text-decoration: none; }
    a:visited { color: #ed7b93; text-decoration: none; /* up your ... Opera */ }
    a:hover { color: #e61b47; text-decoration: underline; }
    a:active, a:hover { outline: 0 none; }

  54. 68

    Great info! Thanks for this!


↑ Back to top