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!
|
Pointer
Corporation