CSS within ASP.NET Pages – How ASP.NET Uses Skins and Themes with CSS, and the Problems this Can Cause

If you’re developing a website in an HTML editing software application, life is straightforward: you create a style sheet, and apply this to your web pages.  So if, for example, you want certain copy to appear in a big red box with yellow background, you create a style (called bigRedBox perhaps) and apply this to the relevant DIV tag: job done!

Life is also fairly straightforward if you’re developing an Intranet for a small company using ASP.NET, and you don’t have to worry too much about compatibility with HTML standards or accessibility for disabled people.  You can make free use of ASP.NET controls like gridviews, textboxes, panels and labels to create your webpages, secure in the knowledge that Microsoft will do its best to render these sensibly for your clients’ browsers (be they Firefox, IPhones, Safari, IE, Chrome or any other software).

Where life gets tricky is when you want to use all the server-side tools in ASP.NET, but then use CSS styles to format them.  Here’s how this works.

Themes and Skins

In ASP.NET you can create a theme and apply it either to individual webpages or to an entire site.  As part of this theme, you can skin controls. 

For example, suppose that you think command buttons look better with a pink background (maybe you’re going through a girlie phase; or maybe you are in fact a girl).  To do this, you could create a skin which specifies that all text boxes will be pink, and the web server will duly oblige and apply formatting to the HTML INPUT tag (which is, ultimately, what an ASP.NET textbox will become).

If you then apply a style to the resulting INPUT tag, this will be overwritten by the theme.  You can set the CssClass property of a text box (or any other server side control), but again the skin will take precedence over this.

A Policy Recommendation

There are some compromises you can make to keep the best of both worlds (server-side controls and CSS formatting).  Here are a couple.

You could avoid web server controls altogether, and use server-side HTML tags instead.  For example, you could declare a DIV tag, give it a nice format using a style and then set its RUNAT attribute to SERVER.  You could then use server-side code to manipulate the contents of the tag.

Alternatively (and probably better), you could avoid skins altogether, and rely on the CssClass property of server-side controls to format them.  For example, you could create a gridview, and give the header row, item row, footer row, pager row and all other component parts separate CssClass properties.  Bearing in mind that a gridview is rendered in HTML as a table, you could then create a style sheet to format the table and its header row (TH tag), rows (TR tag) and cells (TD tags) accordingly.

Out of the two approaches, we prefer the second.  It takes a while to set up your style sheets successfully and there are some annoying cross-browser niggles, but it can be made to work.

Related ASP.NET Articles