How to Print only Text using CSS

I was recently asked a question of the forums of how to send text only data to a printer. Well it’s not as hard as you think. The <link> tag has an attribute called media. One of the values is called print, which means the style sheet will only be applied when you print the document. You can use this to hide images when you print. Create a new style sheet (print.css) and add the following to it:


Then in your page, all you need to do is reference that style sheet, and it will only be used when you print.

title>Print Text Only Using CSS</title>
link rel="Stylesheet" media="print" href="print.css" />
img src=""
alt="Google" />
p>Faucibus non sit amet elit. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer placerat, dui sed
posuere molestie, urna sapien porta purus, vel sodales ante
erat sed arcu. Nunc semper, diam ut blandit elementum,
ipsum purus vestibulum quam, sit amet auctor est nunc ut
risus. Maecenas vitae justo sit amet erat congue aliquet
molestie commodo odio. Praesent tempor pellentesque nibh.</p>

The code above is a small HTML page that displays Google’s logo and well as some sample text. When you print this, the image won’t be displayed. You can also do other stuff like changing the font size, font color for print only. This is a very useful thing to know.

About The Author

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET and regular presenter at conferences and user groups throughout Australia. Being an ASP.NET Insider, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with JavaScript. He also blogs regularly at Follow him on twitter @malcolmsheridan

No comments: