Eric Meyer on CSS: Mastering the Language of Web Design

Finishing Up

Now that we have the print styles finished, let’s switch the media values back so that the styles actually apply to the media for which they’re intended (see Figure 7.16).

<style type="text/css" media="screen">
h1 {font-family: sans-serif; border-bottom: 0.125em solid #F33;
   margin-bottom: 0;}
tr.required td.lbl {border-left: 0.5em solid red; background: #FCC;}
td.lbl {border-left: 0.5em solid green; background: #CFC;}
div#mailArea {display: none;}
input.writein:focus {background: yellow;}
</style>
<style type="text/css" media="print">
td {padding: 0.5em 0.125em;}

Figure 7.16. Returning to the screen styles, we discover a problem.

[View full size image]

As you can see, the U.S. mail address we added for printing appears onscreen, ...