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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.