How To Create A Print CSS StyleSheet

Printing webpages can be a disaster. You end up printing the navigation, sidebars, footers, ads, videos, and somewhere in the middle, the actual content. This can waste a lot of paper and ink which isn't good for people's wallet or the environment.

Webpage Printed

Printing is expensive! The average cost of a printed color page is about $.15 and black and white is $.03 - $.07 (depending if it's laser or inkjet).

Remember this is your content and your brand, not having a Print Styesheet can cost you. Your content wont look good in printed format and you'll piss off your readers.

Create a Print.CSS File

/* Use Serif Fonts */

body {
margin:0;
padding:0;
line-height: 1.4em;
word-spacing:1px;
letter-spacing:0.2px;
Font: 13px "Garamond", Times New Roman, serif; color: #000;
}

You can learn more about why you should use serif fonts for print here.

/*Remove Elements Not Needed for Print*/
#logo, #navigation, #sidebar, #footer {
display:none;
}

Include Your Print CSS File In Your Header Tag

Comments

Convert Your Blog Into an eBook

If you're a blogger, you've probably considered publishing your blog to print. The good news, with some simple custom CSS you can convert your blog into an eBook.
Another advantage of using HTML & CSS to format your eBook is you can convert to PDF and EPUB format. Images First step is to go through your blog and ensure you've got high quality images. General rule of thumb is bigger(physically) is better. You can have a large image on your website, but display it smaller. This will result in larger file sizes, and potentially slower page load, but with today's high speed internet this really isn't a concern (imagine netflix and youtube are streaming high definition video).

Go through your blog and replace any small images with larger images. Font Chances are, your blog is using a Sans-Serif font. Wait a minute, what's a sans-serif font you ask? Ok quick lesson.
Serif
See the little lines at the top and bottom of the letters and numbers? These are called &qu…

Save Webpages as PDF

If you like to archive webpages, or share them, a great way is to create a PDF of the webpage. It's easy to do!

Option 1: Luxury PDFs PrintFriendly.com is a cool web application that optimizes and formats webpages for Print or PDF.

Step 1: Copy the URL of the webpage you want to save as PDF.

Find a webpage you want to save as PDF. In the top of the browser is the address bar. URL is a fancy name for a webpage's address. Select the address/URL and right click on it and choose "copy".

Step 2: Paste the URL into PrintFriendly.com

Now, go to PrintFriendly.com and paste the URL into box that says "enter a URL".

Step 3: Click PDF

PrintFriendly will optimize and format the page for printing or PDF. Click PDF, then save and you're done.

Option 2: Print to PDFIn your browser, go to a webpage you want to save as PDF. You're going to use the Print command, however we're not going to actually print the page.

Step 1: Print Preview

Use the menus: File > Print
…

Media Types

People have many options to consume content, read it on their screen, mobile device, printed, emailed as a PDF, on a television, braille devices, and speech synthesized.

You want to create your content to be accessible from any device. CSS gives you the flexibility to customize your styles for different media types.
How would you use media types? The layout of your content will be different on different devices.

There are 9 Media Types
all - Suitable for all devices.braille - Braille tactile feedback devices.embossed - For paged braille printers.handheld - Think small screen, mobile devices, limited bandwidth.print - Paged material, or PDF.projection - Projected presentations, for example projectors.screen - Computer screensspeech - Speech synthesizers. tty - Teletypes, terminals, or portable devices with limited display capabilities. You must use pixel units with the "tty" media type.tv - Televisions are low resolution, color, limited-scrollability screens, with sound avail…

Print CSS

Search This Blog