Information Printing with Cascading Style Sheets (CSS).

In term of the information printing, with a print-friendly style sheet represented information clearly and save resources. With print-friendly style sheet remove all the non-friendly options on pages. This made higher readability on each page. There have few points on print-friendly style sheet design, the points as following:

• With the black color shows information on all the text including titles.
• With a regular font-style and font-size presents information.
• With underline style shows the links inside the pages.
• Remove non-essential icons or images in pages.
• Remove the Menu or Navigation Bar in pages.
• All heading illustrate with the bold style.
• Resizing the page margin fits presentation.

Focus on the CSS defining in web page, used the link element to define the print style sheet each web page. The following examples are different on the attribute with media=”screen” for screen style, media=”print” for printing. The syntax format on link element in web page as next:

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

We can use one link element in web page with screen style and print style. The syntax format on link element in web page as coming:
<link href="alltype.css" type="text/css" rel="stylesheet">

But inside the file ”alltype.css”, two keyword “@media screen” and “@media print” needs to be used in format definition.
@media screen { ‘all screen style put in here’ }
@media print { ‘all print style put in here’ }

Compare the information page layout on print-preview with print-friendly style sheet and not include print-friendly style sheet. See as the screenshot-1 without print-friendly style sheet. Screenshot-2 showed with print-friendly style sheet. It is a draft version of information printing; this information printing style would be changed if the program sponsors have other idea.

Screenshot-1

Screenshot-2