A much better solution and one which is multi-purpose is to use Firebug. Firebug is a Firefox extension which helps you to test and debug CSS and javascript. Using the Inspect button, you can select a particular element on the screen and see what styles are being applyed to it and what files contains those styles. You can also dynamically turn on or off styles to see if this affects the change you want without having to edit the CSS. Its a fast and efficient way to debug stuff. It has many other features that my developers love but for me when they showed me the CSS debugging I was in heaven.

<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” />
to this
<link rel=”stylesheet” href=”<$MTBlogURL$>styles-site.css” type=”text/css” media=”screen” />

If you don’t do this you will be fighting your screen styles when you create your print stylesheet. This is bad and makes lots more work. Having the stylesheet only be for media-type “screen” is the default in WordPress so you don’t have to worry about this. Once you have done this you can start formatting the print version from scratch. Without a print stylesheet you’ll get a very plain looking page. THIS IS OKAY! In fact its what you want so that you can add minimal formatting to make your page look good when it is printed.The most important thing you will want to do in your print stylesheet is “hide” the things on your page that you don’t want to show up when you print. For example you might not want to show your banner or navigation when you print. To do this you use a CSS property called “display”. The display property is somewhat difficult to explain what you need to know is that can be used to hide things on a web page. So set it to {display: none;} which basically means “don’t display this element”. You can do other helpful things like making the background white and all the text black, and setting up rules for page breaks. Below is my print stylesheet for this blog.

/* Print Style Sheet */
/* added print stylesheet for LWC */

@media print {
body { background:white; color:black; margin:0 }
#sidebar {display:none;}
#footer {display:none;}
.navigation {display:none;}
#commentform { display:none }
a {color:#000000;}

/*Some rules about Page breaks */
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
img { page-break-inside:avoid;
page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
}

This is a really simple print stylesheet but it does gets the job done. It didn’t take me long to create and it makes life a lot easier for users when they print my site. The downside is that if you want a screen shot of my site you are going to actually have to take one rather than printing the site or sending it to PDF. I think that this is okay though. Based on what I’m seeing in my server log files. Few people are visiting my site in person. Which I interpret as meaning that content is king and my design doesn’t matter as much. If I saw different traffic in my server logs I might decide to do things a little differently. Because maybe people would want to print what they were seeing not just the content. This is an issues you need to be sensitive to when you create a print stylesheet. However, my opinion is if you have a content intensive site that having a print stylesheet which drastically changes how the pages looks is okay. Especially if your site doesn’t print well otherwise. However, as with any design decisions you should get feedback from your users when making this type of decision.