Convert structured XHTML and CSS pages to printer pages

In the past, creating a printer-friendly version for Web pages meant to design a separate page with both the layout and format modified, so as to achieve satisfactory results during printing. Now, by using structured XHTML and CSS, you can achieve the same effect with less effort.
 
From screen display to print effect
Most Web pages are designed for viewing on computer screens. However, sometimes you need to print some pages to keep a long-term record or use it as a convenient offline reference.
The trouble now is to make Web pages look appealing and colorful on computer color screens, the same effect cannot be displayed on printed web pages, especially when the printer is black or white. When being downgraded to grayscale printing, the color combination will lose (original) the comparison effect; the image will look distorted and take too long to print; navigation buttons that play an important role in web pages are useless in printing pages.
To overcome these problems, Web creators often design a printer-friendly version for the page, so that visitors have the desire to print. Printer-friendly versions usually contain the same content as the main Web pages, but most graphics, backgrounds, and navigation elements are omitted. The page also converts the color into a certain form to generate acceptable gray images.
CSS solution
One advantage of separating content and representation using structured XHTML labels and CSS formats is that by changing the CSS style, you can easily reformat the content. Therefore, creating a printer-friendly page is to link a different CSS file to the same XHTML page.
You can link the screen style sheet and print style sheet to the same XHTML file at the same time, so there is no need to create a printer-friendly page separately, you only need a printer-friendly style sheet. When you add a multimedia file to the link code, this tells the browser what CSS rules should be followed or ignored for screen output, and what rules should be used to print the output.
The following example links to a pair of CSS files:

The code is as follows:	Copy code
<Link rel = "stylesheet" type = "text/css" media = "screen" href = "mysite-screen.css" /> <Link rel = "stylesheet" type = "text/css" media = "print" href = "mysite-print.css"/>

To support earlier browsers, you must stick to the CSS1 media descriptor screen and print. They are mutually exclusive. Therefore, when a page is generated for the screen display, the browser will ignore the print style sheet, and vice versa. Therefore, each style sheet must contain the same style selector, but there are different rule declarations to generate page styles for different output devices.