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

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 0 threads Add post