Using an ASP.Net Master Page with theme and CSS

Using an ASP.Net master page with a theme and CSS can be tricky.  Themes and master pages came out in 2005.  There were hundreds of articles written about them at the time.  Since then, however, the way we do web development has changed a great deal.  It's time to readdress the subject.  In this article, we'll cover the basics.  Then we'll add stylesheets for printing and for Internet Explorer only.

The Problem

Suppose I want to make a website without .Net, one that's nothing but HTML and CSS.   My HTML head might look something like this:

Note that I could have said theme=BlueTheme instead of styleSheetTheme =BlueTheme.  The main difference between these is whether the style from the theme applies first and then the styles added to a particular page can override these, or the opposite.  

Adding Style.css

Including style.css is simple.  I just place the file inside the BlueTheme folder.  Now that I've specified in the Web.config file that I want to use BlueTheme, any CSS files I put in the BlueTheme folder will be linked in and applied automatically.  I don't need to do anything to the Master Page. 

Now, when I look at the Master Page in Visual Studio in designer view, it shows me (approximately) what my page looks like after applying style.css.

I could include multiple CSS files this way just by adding them to the BlueTheme folder.  All the CSS files in the BlueTheme folder will be linked in and applied automatically.

CSS For Printing

I can't just put my print.css file in the BlueTheme folder.  All the CSS files in the BlueTheme folder will be linked in and applied, even if I'm not printing.  I only want the print.css file to be applied when I'm printing.  I need to  put my CSS file somewhere else.

I have added a new folder to my project, Css.  Inside this folder, I've added my print CSS file.  I renamed my file from print.css to BlueTheme_print.css so that I won't get confused if I add additional themes later.

Notice I didn't hard code the address for the CSS file.  Instead, I used <%# Page.ResolveUrl(  ) %> to link in the file at run time.   To make this work, the head tag must include runat="server."  Finally, in the code behind for the Master Page, I add one line of code, Page.Header.DataBind(); .

Note that you must use <%# Page.ResolveUrl(  ) %>, not <%= Page.ResolveUrl(  ) %> .  That is, use #, not =.    This is an easy mistake to make, one which has caused hundreds of programmers to post frustrated questions to .Net forums looking for help.  If you put the wrong thing, you will get this error:

As with the print CSS, I can't just include ie.css in the BlueTheme folder.  All the CSS files in the BlueTheme folder will be linked in and applied, regardless of what browser I'm using.  I only want the ie.css file to be applied in Internet Explorer.   I need to put my CSS file somewhere else.  I will put it with the print CSS file: