flickr photo by Sustainable Sanitation
A print stylesheet formats the printed version of a web page be in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, we’re left with web pages that frustratingly don’t print properly on paper.
It’s remarkable that so few websites use print stylesheets as:
- Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
- They’re phenomenally quick and easy to set up
Do this quick test
Open a new tab in this browser and go to your blog (or website). Now preview what the printed page will look like.
- In Internet Explorer, right-click somewhere on the page and click on Print Preview.
- In FireFox, go to the top left of the browser and click Firefox → Print → Print Preview.
- In Chrome, click CTRL-P.
| This font is really small and hard to read. Sidebar has no purpose on printed page. Comments and all page navigation is shown below, wasting paper. | Prints clean like a single article — no extra clutter. Very readable. Most navigation and links that are useless on paper have been removed. |
If your blog (or website) doesn’t look pretty much like the image on the right, you can fix this by adding a simple print stylesheet.
Add a print stylesheet
To add the default print stylesheet in Hubspot, got to Settings → Website Settings → Header HTML and add the following code to the bottom of any code that might already be in this box:
<link rel="stylesheet" media="print" href="/portals/_default/skins/foxboro/print.css" type="text/css>
Then scroll to the bottom of the Settings page and click “Save Changes.”
If you want finer-grain control of your print stylesheet, take a look at the code in the default print stylesheet at YOURDOMAIN.com/portals/_default/skins/foxboro/print.css. Use this as a model to create your custom print stylesheet.
Subscribe to Our Blog
Join hundreds of people who get free and fresh content every week.
