How to create a printer-friendly page

If someone wanted to print out a page from your blog, chances are they would only be interested in printing the main content of the page and not the links, ads, pictures and other page components. That is why it is important to always have a printer-friendly version of your blog. Fortunately, this can be done easily just by adding a few lines (called a media query) to your existing stylesheet. A very basic example would look like this:

create printer-friendly page

<style>
@media print {
 header, footer, nav {
 display: none }
}
</style>

As you can probably guess already, what the above code does is to tell the browser not to display the header, footer and nav sections of your page for the print medium. Only the main content, such as your blog post, will be visible to the printer. You can customize this code in many different ways. For example, you can display the header but change the font and background colors. Or you can change the width of the main section so that it occupies the entire page, and so on.

0 comment... add one now