Create a Print-friendly Stylesheet for Printable Web Pages

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

For some web site projects, it’s reasonable that you’ll want users to easily print some of your web pages. This is especially useful for…

  • instructional, tutorial pages including cooking recipes
  • news and blog pages
  • resume and profile pages

Although a user can simply use the print button on their browser, this will have a negative effect in that they’ll end up printing useless information such as…

  • navigation menus
  • logos and banners
  • advertisements

There are a few things to consider when styling a web page for a print-user’s needs.

The HTML is relatively simple, just provide a link in the head section to a second css file. Make sure each css file has the media attribute and values for their respective media types.

<link rel="stylesheet" href="styles/screen-friendly.css" media="screen">
<link rel="stylesheet" href="styles/print-friendly.css" media="print">

Add Comment