How to handle printing of HTML pages?

Question

In my portfolio site I have listed my projects under separate tabs (tab menu). This works well except for printing which requires the user to click on a tab, print, click on the next tab and print the same page again to get everything. Being a portfolio I'd assume that visitors want to print all of the content.

Is there a general way to create a different style when printing a web page? Or should I just add a printer icon on my page which redirects the user to a different page where all the data is in a big chunk and then prompt the user's browser to start printing?

Answer 1

You can use the media type with css:

Like this:

<link rel="stylesheet" type="text/css" media="screen" HREF="screen.css" />
<link rel="stylesheet" type="text/css" media="print" HREF="print.css" />

media="screen" will be used normally, the media="print" version of the css will be used when printing. You can use that stylesheet to override the tab styles so the content is always visible...you can see this via print preview.