ITSS WebDev Guide

Creating print versions

While web pages are primarily intended for web viewing, many times your pages will also be printed. In the past, web designers were often required to create two separate web pages: one for the screen, and one for print. However, if you use cascading style sheets (CSS) you can easily create one web page that works beautifully in both mediums. Using the "media" descriptor, it is fairly simple to create and specify one CSS for the screen version, and another for print.

For example:

  <style type="text/css" media="screen">
  <!--
        @import "main.css";
  -->
  </style>

  <style type="text/css" media="print">
  <!--
        @import "print.css";
  --> 

Or, for older browsers that don't support the "import" feature:

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

Most browsers now offer the "print preview" function, which allows you to see what your web page will look like once it is printed. If the printed version is not acceptable as is, you may wish to create a second "print" style sheet.

For details see:

• Web Design References: CSS - Media Types
• Multiple style sheets

Rev: sab 01.05 xs