Using print stylesheets with ASP.NET Themes

ASP.NET themes are great (in principle), and allow you to have lots of control on how your pages look with theme-specific skins, stylesheets, images etc.  The only thing that’s a little bit annoying is that you can’t specify (without codebehind) what media the stylesheet should apply to. 

If you add a new stylesheet to your theme folder called ‘printer.css’, ASP.NET will omit the ‘media’ attribute when it’s output to the <head> section, and it will then be subject to the normal order of precedence rules, affecting your screen output.

There may be other easy ways to do this, but W3C generally think of everything, and then the world catches up – so just use the @media rule to surround all your media-specific styles.  The easiest way to organise this is obviously in different style sheets if you’ve got a complex layout.  My simple ‘printer.css’ is below (along with the stylesheet link generated by ASP.NET). 

This simply knocks out the left nav, right side bar and the footer (all divs of course), leaving a relatively clean page for printing. 

<link href=”../App_Themes/corporate/printer.css” type=”text/css” rel=”stylesheet” />