Stylesheet for Printing

I never questioned how some HTML pages print everything on the page and others only print the relevant information. I just learned that there is a media attribute in a style sheet tag that controls to which media the style will apply.

The options for the media attribute are

all

Suitable for all devices.

aural

Intended for speech synthesizers. See the section on aural style sheets for details.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small screen, monochrome, limited bandwidth).

print

Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.

projection

Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.

screen

Intended primarily for color computer screens.

tty

Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.

tv

Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

The media type can be included in the stylesheet with

@media print{
  style1 {
    ...
  }
}

Alternatively, separate style sheets can be created for each media type.

<link href="styles/screen.css" type="text/css" rel="stylesheet" 
      media="all" id="screenCSS" />
<link href="styles/print.css" type="text/css" rel="stylesheet" 
      media="print" id="printCSS" />

---

A javascript trick can be used to make the current page look like print preview; kudos to the creator. The idea is to change the media type of the 'print' sytlesheet to 'all' using javascript.

I would make one addition to the technique: use three style sheets. The third stylesheet would be for print preview. This is necessary in the event that you don't want to print the link or button that toggles the style sheet.

<link rel="stylesheet" href="styles/all.css" type="text/css" 
      id="screenCSS" media="all">
<link rel="stylesheet" href="styles/print.css" type="text/css" 
      id="printCSS" media="print">
<link rel="stylesheet" href="styles/preview.css" type="text/css"
      id="previewCSS" media="preview">
<script language='javascript'>
  function togglePrintPreview()
  {
     var currCSS = document.getElementById('previewCSS');
     if(currCSS.media == 'all')
       currCSS.media = 'preview';
     else currCSS.media = 'all';
  }
</script>