Colored boxes - Step 11. Print CSS
Finally, we need to prepare the layout for printing. If you want to faithfully reproduce the on-screen layout, you could change the links to your external style sheets so that they can be accessed by printers. There are many ways to do this including media="all" and media="screen, print".
If you want to give the user a print-friendly page you can do the following.
1. Duplicate your main css file (stylehseet1.css) and place one copy somewhere out of the way. We will now work on the stylehseet1.css file and convert it to a print style sheet. As far as the browser is concerned, it is still a screen style sheet. This means we can work on the file and preview it in a range of browsers without having to go to print preview at every step.
When we are finished, we simply change the name, and put a new link in the head of the document pointing to this file.
2. Look at the layout and decide what is necessary for the print version.
3. For this example, we will remove the header graphic, mainnav and right menu, as well as removing all colors and underline links.
- Hide any containers you don't need using
display: none; - Change all colors to black or grayscale colors.
- Change links using
a { text decoration: none;} - Remove font sizing and allow the default font-sizing to be used.
- Set some page margin using something like this:
body { margin: 2em; }
The print-friendly layout looks like this
4. Change the file name and bring back the duplicated version. Then, add a new link in the head of your document:
<link rel="stylesheet" href="print.css" media="print">
