ASP.NET 2.0: Implementing print stylesheets with themes

In ASP.NET 2.0, the recommended model for using stylesheets is to encapsulate them in a theme with relevant images and skins. To facilitate use of themes, webforms must contain a head tag with the runat=”server” attribute set: this ensures that any stylesheets included in the theme are referenced in the html head. As this is done automatically, you cannot control the media type in the html head where the css is referenced. Traditionally, I would have used two separate stylesheets and referenced them manually using the following code. You can still do this in asp.net, but this is not possible if you want to use the themes model:

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

Fortunately, there is the less well known @media construct in css (which I only recently discovered). This wraps CSS elements so that they are only used for a specific media type. This allows you to add either print specific styles to your main style sheet, or have two separate stylesheets – one of which is wrapped using the @media construct. See example below:

@media print
{
   /* Print stylesheet overrides to go in here */
}

Note that as stylesheets behaviour defaults to media=”all”, stylesheet values are cumulative. This means that the print stylesheet must be included after the standard stylesheet, else standard stylesheet values will override the print stylesheet values. To solve this, the print stylesheet name should be alphabetically later than the main stylesheets name. Alternatively, the @media print block can just be placed at the bottom of the main stylesheet.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>