Take the 2-minute tour ×

I have a page I want to print that has a bunch of content with links.

Is there a way to style the links using css so the link titles look like normal text?

I want to have my link that normally looks like:
look like normal text without a hyperlink:

share|improve this question
add comment

4 Answers

Add an other css file like this:


When you print it will call this css file, not the regular one for media="screen"

share|improve this answer
I was already calling a css sheet meant for printing. When I specified media="print" it stripped ALL the formatting. There was nothing specified before. –  F Oak Dec 22 '11 at 20:24
Don't strip all of it, specify what you want the links to look like - all browsers will style links by default (blue + underline). –  ptriek Dec 22 '11 at 20:28
I meant that specifying media="print" seems to take all the formatting of everything away. –  F Oak Dec 22 '11 at 20:31
That would happen indeed if you add an empty CSS file for print, but shouldn't happen if you actually have some CSS declarations in it... CSS file for print is not for overruling screen CSS, it's completely separate. Also, sure you haven't made any typos? –  ptriek Dec 22 '11 at 20:36
@ptriek Do I have to specify something in the CSS sheet itself? –  F Oak Dec 23 '11 at 2:43
show 2 more comments

By "suppress" I assume you mean "style" since you can't click on links that are printed.

Use a print stylesheet and style the A tag to look like regular text.

share|improve this answer
I think you are right. I am new to web development and trying to figure out my terms. –  F Oak Dec 22 '11 at 20:26
Fixed that in the question. –  ptriek Dec 22 '11 at 20:31
add comment

Normalize the links using a print media query and then print, e.g.

@media print {
    a, a:visited { color: #000 !important; text-decoration: none; }
share|improve this answer
add comment

you can define all the styles for links in your @print css section

@media print {
    a { text-decoration: none; color: #000 }
share|improve this answer
This feels like a hack, though doing that does get the look I want. I was hoping to remove the links altogether, but maybe this will work instead. –  F Oak Dec 22 '11 at 20:32
nope, it's not a hack :) The print type is an essential part of W3C standards along with screen and less popular handheld, tv etc ( w3.org/TR/CSS2/media.html). And to completely remove the links you can do a { display: none } –  Zoltan Toth Dec 22 '11 at 21:06
I think I am understanding now. I think @media print is so you can define a specific section in your css sheet for printing. I used a whole css sheet for a print style rather than specific parts of the main css sheet. –  F Oak Dec 23 '11 at 2:36
As for the a { display: none } part, that hides the link thingies completely. I want somewhere in-between, where the text stays but the links behind the text deactivate/hide/dissapear. –  F Oak Dec 23 '11 at 2:40
the @media print is the same as a separate stylesheet for printing that others suggested - but putting it in your main CSS file saves you 1 HTTP request and makes your website slightly faster :) If you have the URL behind your link title you can try this to hide it a[href]:after { content: " " !important; } –  Zoltan Toth Dec 23 '11 at 11:27
add comment

Your Answer


