Setting Media property for StyleSheets When Using Themes in ASP.Net

To prevent the unwanted elements like page headers and navigation elements from being printed, we will use separate stylesheet with media="print" that will hide these elements in the printout. Similar to below,

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

Refer Printing ASPX Page by Hiding Some of the Page Elements Dynamically to know more.

Themes and skins is one of excellent feature that is introduced with ASP.Net 2.0. When we use themes to provide styles in our project, all the stylesheets under the theme folder will get automatically linked to the page output. For example, if my theme folder has 2 styleheets called article.css and CodeDigest.css, then the page output will have both the stylesheets attached to it. Refer below,

<link href="../../App_Themes/CodeDigest/article.css" type="text/css" rel="stylesheet" />
<link href="../../App_Themes/CodeDigest/CodeDigest.css" type="text/css" rel="stylesheet" />

Since, it is rendered automatically in the page output it is not possible to supply a media attribute to the <link> tag when we use themes. As an alternate way to provide this, we can wrap the entire print styles inside @media print {} in the stylesheet file.

So, our print.css should be like,

@media print
{

//print styles go here..

}

Also, you can make the other styles sheet that will render on the screen inside @media screen {}.

@media screen
{

//Theme styles go here..

}