Using a print style sheet

Add the following to your <head> tag.

html

<link href="/path/to/print.css" media="print" rel="stylesheet" />

Using media queries and @page to control printed content

You can use the CSS @media at-rule to set different styles for your webpage when it is printed on paper or as a PDF versus when it is displayed on the screen. The print media type sets the styles for printed media; these styles will only be used for printed content.

Add this at the end of your stylesheet. Note that specificity and precedence rules still apply:

css

@media print {
  /* All your print styles go here */
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}

You can also use the @page at-rule to modify different aspects of printed pages including the page's dimensions, orientation, and margins. The @page at-rule can be used to target all pages in a print-out or just a specific subset of pages

Detecting print requests

Browsers send beforeprint and afterprint events to determine when printing may have occurred. You can use this to adjust the user interface presented during printing (for example displaying or hiding user interface elements during the print process).

Examples

Here are some common examples.

Automatically close the window when finished

The following example will close the window after the user has printed its contents:

window.addEventListener("afterprint", () => self.close);

Print an external page without opening it

If you want to be able to print an external page without opening it, you can utilize a hidden <iframe> (see: HTMLIFrameElement), automatically removing it after the user prints its contents. The following is a possible example which will print a file named externalPage.html:

HTML

html

<button id="print_external">Print external page!</button>

JavaScript

function setPrint() {
  const closePrint = () => {
    document.body.removeChild(this);
  };
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.print();
}
document.getElementById("print_external").addEventListener("click", () => {
  const hideFrame = document.createElement("iframe");
  hideFrame.onload = setPrint;
  hideFrame.style.display = "none"; // hide iframe
  hideFrame.src = "external-page.html";
  document.body.appendChild(hideFrame);
});

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on Nov 7, 2025 by MDN contributors.