Submit Your Article
Print style sheets are a key part to your site if it is providing information that one might one to print out. I have encountered many websites with no print style sheets, this can make it frustrating to print out articles and certain webpages. In this tutorial I show you how to make a proper print style sheet, and how to implement it into your website.
I am going to be using an old site I had designed and coded a few months back as an example, you can check it out here: http://nowcss.com/tutorials/3/. To view what a print style would look like in firefox: file -> print preview (this is sort of the same for all browsers).
There are 4 key elements to our print style sheet, Logo and Header to identify the website, The page title, The content of the page, and The Footer. In the below diagram I have highlighted the 4 key elements we need to focus on.
And thats it! For more information checkout the “Going to Print” article at alistapart
As you might notice, there isn’t much style to print styles, due the fact that we want the user to get only the 4 key elements of the page. Print styles also don’t support such common CSS selectors such as background-image and background. We basically we’ll be working with borders, font-sizes, and margins and padding.
Below is the example print stylesheet for our example page, very simple, getting rid of the stuff we don’t need. I don’t believe that there is any browser problems with print stylesheets, but I am going to research it after this tutorial and update to support it.
To implement a print stylesheet it is very simple, just use the following code.
Now that we have our print stylesheet setup heres our result:
And thats it we have a print stylesheet! For more information about print stylesheets, alistapart has a great article regarding them, and as always you can checkout our example here.
Topics: CSS, Design, Web Development
