Thursday, August 27, 2009

Screen and Print styles in the same CSS file

Until today, I was under the impression that to vary the styles used for HTML displayed on screen vs. printed to paper, one had to create distinct CSS files for screen and print, and use two separate <link> tags, a-la:

<link rel="stylesheet" href="styles_screen.css" />
<link rel="stylesheet" media="print" href="styles_print.css" />


However I found out today that you can actually just use one CSS file, and separate your media usage with the special @media selector. Simply enclose style definitions by media type, as in this simplified example:

h1
{
   font-family: Verdana;
}
@media print
{

   h1
   {
      font-family: Times;
   }
}


Nothing revolutionary, but cool to know you can save a separate HTTP file request by combining all your CSS into one file.

1 comment:

Was this post helpful? Do you have questions about it? Do you want to share your own programming blog? I'd love to read your feedback.

Note: Only a member of this blog may post a comment.