Pointer Corporation
     The Information Technology Architects
Using Cascading Style Sheets in ASP.NET 2.0 - with Master Pages Bridging the Gap

Introduction

Cascading Style Sheets (CSS files) are an excellent choice for separating a web site's format from its content and centralizing it for a uniform look and feel.  The challenge of using CSS files in an ASP.NET website, however, is the absence of some straight-forward documentation on how to link the two.  That's why you'll find so many postings on various discussion boards from developers who have created an elaborate ASP.NET website and a variety of professional-looking CSS files, but have trouble linking the two in a consistent and efficient way.

Hence, this article! 

Verifying the Prerequisites

Before introducing Cascading Style Sheets to your ASP.NET website, you need a few preliminary verifications: 

(A) Has your ASP.NET website been upgraded to the latest version (currently 2.0)?  If not, you're much better off converting / migrating to ASP.NET 2.0 before CSS files come into the picture.  (Please click here for a related article on the conversion process from ASP.NET 1.1 to 2.0.)

(B) Have you incorporated Master Pages in your ASP.NET 2.0 website?  CSS files integrate much easier with an ASP.NET 2.0 site which already uses Master Pages.

(C) Have you developed your desired style sheets?  If not, go ahead and create them.  If yes, make sure they reference generic objects, not specific instances of your ASP.NET website.  (More on this later in the article.)

Once you have verified the above, you're ready to bring the power of CSS files into you ASP.NET website.

Bridging the Gap

Let's go though a real-life exercise.  Suppose you want to use Cascading Style Sheets in order go give a uniform look to all your datagrid objects.  You can accomplish this is four easy steps:

Step 1: In generating your CSS file, you would come up with something like this:

/* Default CSS Stylesheet for my Web Application project */

.MyDataGrid

{

font-size:small; color:Maroon;

}

As noted in verification step (C) above, the object name in your style sheet MyDataGrid is generic and does not reflect any specific names you may have used in the website, such as Datagrid1, Datagrid2, etc.

Step 2: Link the style sheet to the Master Page of your website, within the <head></head> tags.  For example:

<head runat="server">

<title>Untitled Page</title>

<link href="MyStyles.css" rel="stylesheet" />

</head>

Step 3: For each page in your website which uses a datagrid, make the following changes:

  • On the datagrid's opening tag, add the reference to cssclass:

    <asp:datagrid id=DataGrid1 cssclass="MyDataGrid" runat="server" ShowFooter="True" AutoGenerateColumns="False" DataSource="<%# MytestsDS1 %>">

  • Remove any hard-coded formatting that's already part of the CSS file.  For example, since the CSS file already has font-size:small; the datagrid itself should not specify font size anymore.

As soon as you make these two changes, Visual Studio is smart enough to apply the CSS format to the datagrid and show it to you right away.  This will give you a visual confirmation of the proper link between your CSS file and ASP.NET web page.

Conclusion

With ASP.NET to manage the content of your website and Cascading Style Sheets to centralize the formatting, you've got the best of both worlds!

 

For further information, please refer to our feedback page.