TIPS - CSS: Professional Techniques for Modern Layout - page 86

You probably already have a stylesheet or two for browser layout. Let's assume they're link ed
in, like so:

< link type="text / css" rel="stylesheet" href="basic.css">
< link type="text / css" rel="stylesheet" href="theme.css">

Even though they don't say so explicitly, both of these style sheets are applied in all media—
that is, things are exactly the same as if they had media="all" included in the markup.

< link type="text / css" rel="stylesheet" href="basic.css" media="all">
< link type="text / css" rel="stylesheet" href="theme.css" media="all">

h e i rst question is: Do you want these styles to apply in print? If not, then you probably want
to change the all values to screen .

< link type="text / css" rel="stylesheet" href="basic.css" media="screen">
< link type="text / css" rel="stylesheet" href="theme.css" media="screen">

Okay, that's the default situation. To this, you want to add a print stylesheet:

< link type="text / css" rel="stylesheet" href="basic.css" media="screen">
< link type="text / css" rel="stylesheet" href="theme.css" media="screen">
< link type="text / css" rel="stylesheet" href="print.css" media="print">

88

Great! Um, except when you reload the page in the browser, nothing changes, because you're
looking at it using a screen medium. Since you probably don't want to call up a print
preview every time you make a change to the CSS, and you dei nitely don't want to print out
the page every time you tweak the print styles, you'll need to get those print styles on-screen.

And that right there is the answer: Get them onto the screen while you get the other, screen-
specii c styles of the screen (see Figure 3-11). So change print to screen and the existing
screen values to … some other media value. I use tty because it's the furthest medium
from screen that I can reasonably imagine. Also, it's short to type. Here's an example:

< link type="text / css" rel="stylesheet" href="basic.css" media="tty">
< link type="text / css" rel="stylesheet" href="theme.css" media="tty">
< link type="text / css" rel="stylesheet" href="print.css" media="screen">

Now you can develop the screen styles to your heart's content, reloading merrily until you
have things just the way you want them. When you're done, just change screen back to
print and tty back to screen , and you're ready to do a i nal printout to make sure
everything turned out okay.