Three cheers to us, for being voted Site of the Day and nominated for Site of the Week at The CSS Awards website, a site that features some of the best CSS websites in the world from the top designers, agencies and bloggers working today.

Since launching the new site, Koodoz Design has been featured in some of the industry’s most renowned and popular CSS and Web Design galleries and blogs, including Smashing Magazine, Noupe, Abduzeedo, Design Shack and CSS Mania to name a few – which, for us, is a massive nod of recognition from fellow web design professionals around the world.

We would be super chuffed if we won the award for Site of the Week as it would automatically make us a contender for Site of the Month, which would be fantastic!

So if you like our site, show us your appreciation and support by voting for our website and a big thanks to everyone who has voted so far!

Don’t you just hate it when you print a website only to find out that it’s gone all wrong? Background images and colours are lost, text becomes unreadable due to lack of contrast and many elements, such as menus, are unnecessary when in paper, thus wasting precious micro-drops of the most expensive liquid in the world. Worry not, for CSS is the answer to all of these problems.

You can create a style sheet exclusively for print media

Amazingly, many people —even seasoned web professionals— don’t know this. The CSS2 standard defines ten different media types: all, braille, embossed, handheld, print, projection, screen, speech, tty and tv. I bet you didn’t know you can use CSS for braille printers or TVs!

Inserting print style sheets into your document

You can associate print styles with your documents in numerous ways. The most common one is through the use of the <link> tag. You need to use the media attribute to specify that it’s meant for print:

<link rel="stylesheet" type"text/css" 
 href="print-stylesheet.css" media="print" />

You can also use the @import rule inside style tags – notice the media specification after the parenthesis:

<style type="text/css">
  @import url("print-stylesheet.css") print;
</style>

Finally, you can even specify different media on the same css file. You can do this by using the @media rule:

<style type="text/css">
@media screen {
   body {background: magenta;}
}
@media print {
   body {background: none;}
}
</style>

Styling documents for print

Okay, so now you know how to specify your styles. You now need to tell the printer how to render the document. Let’s take our beloved Koodoz website as an example. Consider our design services page. There are tons of elements that would be useless on a piece of paper: the main menu, the RSS subscription link and the form elements, for instance, so let’s remove these:

p#eco, p#rss-info, form, ul#nav {
	display: none;
}

Also, unless you absolutely need to, do not use colour. Non-decorative images are okay, but other than that, everything else should be black and white, including links. You can, however, use shades of grey for visited and non-visited links, but be careful with the contrast. This provides a nice little usability cue:

a {
	color: #666;
}
a:visited {
	color: #999;
}

Now, for typography, you want to take this piece of advice: for the screen, sans-serif fonts are easier on the eye. For print, however, go with serif. In our case, we’ll combine both: sans-serif for the headers and serif for paragraphs and other large bits of text:

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}
p, ul, ol {
	font-family: Georgia, "Times New Roman", serif;
}

Just the tip of the iceberg…

These are just the basic recommendations for printing. You can do many, many more interesting things: Separate content sections, format tables, use the CSS first-letter pseudo element, etc. Next thing you know, you’ll have mastered editorial design!

SitePrep specialises in fine grading indoor and outdoor surfaces using laser technology for absolute precision. The company was formed in 2000 and has provided service to the building, landscape and construction industry in the areas of earthworks.