Styling web pages for printing

Question

i have several pages on a website which are printed on clicking a button. Here is the HTML:

    <p class="print_line"><form class="print_btn_write"><input type="button" value="print" onClick="window.print();return true;"></form></p>

This works but in a limited way. I want to set the orientation, margins, font etc of the printed pages. I've checked out CSS @page but can't see how to relate this styling info to specific pages on the website. Any help would be most welcome

Answer 1

Split your css into a print and screen version:

@media print {
 #header{
 display: none;
}
}

@media screen {
…
}