Print Styles

Now it’s time to get the page styled for print media. As always, the first step is to hide the screen styles by temporarily setting them to apply to some other medium. This time we’ll pick tty just for the heck of it.

<style type="text/css" media="tty">
h1 {font-family: sans-serif; border-bottom: 0.125em solid #F33;
   margin-bottom: 0;}

This will prevent the screen-media styles from appearing while we work on the print styles. It also returns the page to its initial, unstyled state. (See Figure 7.1 for a reminder of what it looks like.) This is exactly what we want; things would get too confusing if we didn’t do it this way.

The Meaning of tty

The value tty refers to teletype media, which no browser supports. By setting a style sheet ...

Get Eric Meyer on CSS: Mastering the Language of Web Design now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.