Creating master pages, CSS, skins and themes
Part four of a five-part series of blogs

How to create the perfect ASP.NET website, including using master pages, CSS style sheets, and whether to use skins and themes or not.

  1. Creating ASP.NET Websites using CSS and Master Pages
  2. Creating an ASP.NET Website
  3. Creating and Using Master Pages
  4. Formatting Choices: HTML styles, Themes/Skins and CSS (this blog)
  5. Creating and Applying CSS Style Sheets in ASP.NET

This blog is part of a larger online tutorial in ASP.NET.  We also run three-day courses in ASP.NET, and other .NET training courses.

Posted by Andy Brown on 01 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Formatting Choices: HTML styles, Themes/Skins and CSS

I (and to be honest, most web designers) believe that the best way to format a website is by using CSS style sheets, but ASP.NET offers (at least) two other ways.  This page explains why you should avoid themes and skins, and also why you should avoid formatting HTML directly.

If you already believe in CSS style sheets as the best way forward, miss this step of the tutorial out and go on to the next one.

A Simple Example: a Clickable Button

Suppose that we create a webpage with a single clickable button:

Single clickable button

I've gone a bit mad with the formatting for the button: it's got red text, a dark blue border and light blue background.

 

Here's the HTML which generated this (the various parts of it are explained in more detail below):

Sample HTML for button

See the notes below for how this generates the page shown.

I'm not attempting on this page to explain how to use the various formatting tools; just what they are, and why I believe you should stick to CSS.

The Pros and Cons of HTML Formatting

The box round the button comes from the style applied to the div tag:

DIV tag HTML

The style puts a black border round the box and centre aligns text within it.

The next part of this blog will explain in more detail what the various parts of this style mean.  However, for the moment, here's what they produce:

The DIV results

The DIV tag style creates the rectangular border, 250 pixels wide.

 

The advantage of this type of formatting is that it's quick to apply.  The disadvantage is that you'll end up reinventing this particular wheel throughout your website, making it hard to make global changes to formatting.  A better approach would have been to use CSS styles:

HTML referring to class CSS defining style
The HTML refers to a class The class then applies the style

It's good website design to separate content and formatting completely like this.  You should aim to have HTML pages which contain no formatting whatsoever, other than that defined by CSS styles.

An Example of a Server-Side Skin

Our command button above has a pale blue background. despite referring to a CSS class called Bluey

To see why, note that the button has a SkinId called Pinky:

 Button with SkinId

The ASP.NET button control has a SkinId attribute set to Pinky.

I've defined a theme called BlogExample containing a skin file called buttons.skin

Skin file

I haven't shown how to do this here, because I don't believe skins are worth using, but you can see that any theme can contain a number of different skin files.

 

Here's what the definition of this skin looks like:

Skin definition file

The skin, when applied, will give command buttons a light cyan background colour and dark blue border.

 

However, we've also applied a CSS class to our button (called Bluey): 

The CSS class defined

The class should give the button red, bold text and a blue background.

 

When ASP.NET prepares the page, it applies the skin on the server.  Your browser then applies any CSS styles at the client, but the skin settings override the CSS styles (exactly contrary to what you would expect, and also contrary to what you would want to happen).

Reasons not to Use Skins (and Themes)

Skins and themes are an important part of ASP.NET, but I don't think they're worth using.  Here are some reasons why:

Reason Notes
Not WYSIWYG CSS styles show up in design view in Visual Studio, but skins and themes don't.  This means that the only way to find out what a webpage using skins looks like is to view it in your browser.
Skins override CSS As explained above, skins set at the server override CSS styling set at the client - exactly the opposite of what should happen.
Poor autocompletion When editing skin files, autocompletion (present throughout the rest of Visual Studio) seems to disappear.
Skins can't be overridden If you give a button web server control a BackColor property, this will be ignored if one is also applied via a skin.

I'm never quite sure if it's good advice to ignore skins, which is why I've explained what they are above.  I'd welcome anyone who can put the opposing case!

Phew!  Now that I've justified my approach to formatting the perfect website in ASP.NET, it's time to create and apply a style sheet.

 

This blog has 0 threads Add post