Creating master pages, CSS, skins and themes
Part five 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
  5. Creating and Applying CSS Style Sheets in ASP.NET (this blog)

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 and Applying CSS Style Sheets in ASP.NET

In the previous part of this blog, I explained why you should always separate content from formatting by using CSS style sheets.  In this part, I'll explain how to do it!  The first thing to do is to create a CSS style sheet, then we'll apply it to a page.

Creating a CSS Style Sheet

You can apply lots of style sheets to a page, but usually you'll only create one.  First choose to create a new file:

Add new item menu

Right-click, as ever, on your project in Solution Explorer and choose to add a new item

Now choose to create a style sheet:

Adding style sheet

Follow the numbered steps below to create a style sheet

The steps to follow are:

  1. Choose to create a style sheet (ignore the language next to it - a style sheet doesn't have anything to do with Visual Basic or Visual C#!).
  2. Give your style sheet a name (often calling it after the website works well).
  3. Click on the button to add your style sheet to the website.

You can now start editing your style sheet as shown below.

Editing Styles

There are two ways to edit styles.  The first way (and easier way, when you learn the language) is to type them in directly:

Typed styles

This style information was typed in directly (including the comment).

 

The other way is to right-click on a style and choose to build it, although you still have to find your way round the dialog box which apppears:

The Modify Style dialog box

Right-click on any style and choose to build it as shown here.

 

You can then use the Modify Style dialog box to alter your style, although you'll still need to understand the principles involved.

The Modify Style dialog box

This dialog box is that it gives you a preview of what the style will look like.

Applying a Style Sheet to a Page

The easiest way to do this is just to drag the style sheet from Solution Explorer onto the page in design view.

If you've sensibly used a master page, all that you need to do is to apply the style sheet to the master page.

To apply a style sheet to any page:

  1. Open the page for editing in Design view (here we're using the master page).
  2. Select the style sheet you want to apply.
  3. Drag it onto the page and release the mouse button.

Here are the numbered stages described above:

Applying a style sheet

Applying a style sheet to a page.

Here's how Visual Studio will amend the HTML of your page to reflect the change (it inserts a link to the style sheet in the head section of the page):

Style sheet link in HTML

The HTML link to your style sheet inserted

Applying a style sheet to a page can have a fairly dramatic effect:

Before style sheet applied After style sheet applied
Before ... ...  and after

The Next Stage - Writing the Style Sheet

Now that you've created a style sheet and applied it to your website, it's time to write some styles and learn how they work.  This is covered in this separate blog.

 

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" />
</asp:GridView>


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.