Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Part III: Advanced CSS and Alternative MediaIn this rule you see a font specified in pixels, and a background color, and padding applied to all elements. You’ll note that in the print preview in Figure 13-3, you don’t see any background colors,and that the text is still readable, even though it is specified in pixels. Browsers don’t print backgroundcolors or images, by default. There are no workarounds for this limitation of printing from a browser,except for what controls the browser provides to the end user. Safari doesn’t offer the option of printingbackground colors or images, nor does Firefox or Opera on the Mac. In IE 6 and IE 7, you can enable theprinting of background colors and images from Internet Options ➪ Tools ➪ Advanced, scroll down to the“Printing” heading under “Settings,” and then check the box “Print background colors and images.” InFirefox on Windows, you can print background colors and images by going to File ➪ Page Setup andchecking the box labeled “Print Background (colors & images) .” In Opera on Windows, go to File ➪Print Options and check the box labeled “Print page background.”Next in the style sheet is a collection of rules that apply to the screen exclusively. The elementwith id name print is hidden from the screen by setting the value of the display property to none, andthe element with id name screen is given a 10-pixel, solid, gold border. You learn more about thedisplay property in Chapter 14.@media screen {p#print {display: none;}p#screen {border: 10px solid gold;}}Then, following the collection of rules that apply to the screen is a collection of rules that apply to print.@media print {p {padding: 0.05in;}p#print {border: 10pt solid gold;}p#screen {display: none;}}In the second collection of rules, the padding around each element is set to 0.05in, the border isset to 10pt, and the element with id name screen is set to not display, with the display: none;declaration.In the next section, I describe how to control page breaks in printed content.496