Category: media

Multiple medias in the print.css

Let’s say you have a printer-friendly page that consolidates information from multiple sections. The page uses the print.css as all instead of just print. Let’s also assume you want to show things on the screen, such as a link back to the referral page, and different elements on the printed page, such as the url of the referral page.

Simple HTML Example

Go back to the last page.

http://www.last-child.com/multiple-medias-in-the-print.css

CSS solution

You can include multiple medias in one style sheet. Just declare the special rules under @media


@media print{/*show printer only elements, hide screen only elements */
.noprint {display:none;}
.print {display:block;}
}

Your main CSS file would have already declared .print {display:none;}.