|
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.
|