Creating master pages, CSS, skins and themes
Part one 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 (this blog)
  2. Creating an ASP.NET Website
  3. Creating and Using Master Pages
  4. Formatting Choices: HTML styles, Themes/Skins and CSS
  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 | 1 comment

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.

Creating ASP.NET Websites using CSS and Master Pages

The aim of this exercise will be to create the structure for our website:

The final system

Here's what we want each page of the website to look like - a simple title, followed by a white box on a blue background.


The best way to do this in ASP.NET is to create a master page and a style sheet, then apply the style sheet to the master page. 

This blog shows how (and why) to create master pages and style sheets; a separate blog explains in some detail how to write CSS style sheets.

We'll start with how to create an ASP.NET website in the first place!


This blog has 1 comment

Comment added on 11 October 2012 at 00:37 GMT

I have some comments over the "Formatting Choices: HTML styles, Themes / Skins and CSS" and the four reasons against them.

You say: "Skins override CSS"

This is true, but not accurate. Any 'Appearance' property you set on a server control (not necessarily through the skin) is rendered in HTML as an inline style attribute, so if you set the ForeColor="Red" on a Label and you also have a CSS class for that same element saying you want it blue, you know by CSS specificity rules that any inline rule will win. So it is not the Skin to blame, but rather the way style properties are written into HTML.

Besides, the Skin overriding 'Appearance' properties on Controls actually depend on the way you apply the skin to the Page. There are two ways, one is setting the Theme through the  "theme" property, and the other through the "stylesheettheme" property. These you can set at the <%@ Page%> directive, or at the web.config  in the <pages> section. The "theme" way overrides any "appearance" property you set directly on a control, while the "stylesheettheme" way allows the theme to work as CSS cascade, where setting ForeColor directly on the control, overrides the ForeColor set on Theme.

I agree that setting "Appearance" properties through a Skin is not really a very good idea, because of repeated styles attributes all over your HTML, and because you can't override easily those inline properties, BUT... I think skins can be useful to set some "NonAppearence" general properties to SERVER controls and centralize those properties for easy changing them.

Take all <asp:Validators> for instance. They all have a Text property that define what mark to show when validation fails, if you set it through a Skin, not only your ASPX file will get rid of those properties, but you can easily change them from "*" to a "!" in a single place.

I also use skins to set CssClasses I want some controls to have by default. I usually have a class for rows and alternate rows in GridViews, so I place those CssClass in a GridView definition in the Skin and I can forget about them:

<asp:GridView runat="server" CssClass="tabularData" GridLines="None">
    <HeaderStyle CssClass="headerRow" />
    <RowStyle CssClass="row" />
    <AlternatingRowStyle CssClass="altRow" />
    <SelectedRowStyle CssClass="selRow" />
    <PagerStyle CssClass="pagerRow" />
    <EditRowStyle CssClass="editRow" />
    <FooterStyle CssClass="footerRow" />
    <EmptyDataRowStyle CssClass="emptyRow" />

And if I apply my skin the "stylesheettheme" way I can alway re-declare
the CssClass on a particular GridView to overwrite it.

I don't believe Skins are so evil to stop using them, I think it's better
to use them where CSS alone can't help you centralize the appearance.

Reply from Andy Brown

Many thanks for lots of good points.  I don't believe skins are evil - the blog is just trying to show that they should be for occasional use, rather than used as the central way of formatting a website.  I appreciate the sensible comments!

A full-blown discussion forum is being built for this site, which will allow you once more to add comments and discussion threads.