Print stylesheet tips

By

Worked a bit on a css print stylesheet the other day, and I wanted to share my sort of, basic print css setup with you. It’s not very big, but it’ll give you an easy place to start of from, then you can always add to it as you go along. I’ll explain each part.

Setting a good readable font for prints

body {font-family: “Georgia”, Times New Roman, Serif; color: #000; background: #fff; }

Make sure the content you want to be in your print is filling up the whole paper:

#wrapper, .content {width: 100%; margin: 0; float: none;}

Remove unwanted elements with display: none;

.sidebar, .footer, .header { display: none; }

Give your links a new color, and be sure they are visible on a black and white printer.

a:link, a:visited { color: #666666; }

Get your links to print out the link after the anchor text of your links. So that people know what you are referring to:

#content p a:after {
content: ” (“attr(href)”) “;
font-size: 90%;
}

Now, if you have some place where you would like the page to break and get the rest printed on another page, then you can use page-break-before: or page-break-after: to do it, that could be something like a comment section on a blog.

.comments { page-break-before: always; }

Now if your CMS system use relative linkpaths for your internal links, then you can add your domain to the link be using this style.

a[href^=”/”]:after {
content: ” (http://www.spiced2.com” attr(href) “)”;
font-size: 90%;
}

Now you can of course add font styles and things like that to your CSS too but I like to keep my CSS cheatsheets as short as possible. Heres the condensed version for copying:

body { font-family: “Georgia”, Times New Roman, Serif; color: #000; background: #fff; }

#wrapper, .content {width: 100%; margin: 0; float: none;}

.sidebar, .footer, .header { display: none; }

a:link, a:visited { color: #666666; }

#content p a:after {
content: ” (“attr(href)”) “;
font-size: 90%;
}

.comments { page-break-before: always; }

a[href^=”/”]:after {
content: ” (http://www.spiced2.com” attr(href) “)”;
font-size: 90%;
}




Respond!