Web Development

Integrating CSS techniques into ASP.NET 2.0 applications

A few ways to incorporate CSS in ASP.NET is via standard CSS (inline or external), the CssClass property, themes, and CSS control adapters. Tony Patton goes into more detail about the CssClass property and themes after covering standard CSS.

The struggle between the standards community and Microsoft is ongoing. There has been significant progress, as evident with the recent news of the next version of Internet Explorer moving towards compliance.

Microsoft has embraced standards like JavaScript and CSS with its development tools as well. CSS is now the accepted approach to styling Web interfaces, and ASP.NET makes it easy to integrate CSS into your solutions.

There are a variety of ways to implement CSS when building ASP.NET Web applications. A few ways to incorporate CSS in ASP.NET is via standard CSS (inline or external), the CssClass property, themes, and CSS control adapters. I'll go into more detail about the CssClass property and themes after taking a look at standard CSS. (This article is specific to ASP.NET 2.0.)

Applying standard CSS

Both the style and class properties are available for almost every ASP.NET element, as well as the standard HTML elements. The style property allows you to assign CSS to an element on the fly -- that is, with inline code. The class property takes advantage of previously defined CSS classes often within the header portion of the page (imported or inline). This simple example demonstrates both techniques:

<html>

<head>

<title>ASP.NET and CSS</title>

<style>

.textbox {

font-size: 12pt;

font-family: Arial Times New Roman Monospace;

color: black;

}

</style>

</head>

<body>

<form runat="server" id="frmTest">

<asp:Label id="lblTest" style="font-size: 12pt;font-weight: bold;color: Red;" runat="Server">Test</Label>

<asp:TextBox id="txtTest" class="textbox" runat="server"/>

</form>

</body></html>

The style and class properties are not available via IntelliSense within the Visual Studio development environment. Also, the example will display as a warning (not an error that halts compilation) when added to an element within the IDE, but it performs as desired when loaded into your browser. The preferred ASP.NET technique for Web controls uses the CssClass property.

CssClass

The CssClass property has been available since ASP.NET 1.0. It is used to set or return a CSS style class to a Web control. The CssClass property cannot contain straight CSS -- only CSS class names that are defined on the page. It is ignored if the class name is undefined.

The CssClass property provides an alternative to the more popular class property, which is available with all HTML elements. The CssClass property has the following syntax:

<asp:Control id="assigned_id" CssClass="assigned_style" runat="server" />

When the ASP.NET page is delivered to the client, the CssClass property is rendered as the class attribute regardless of the browser. This result is a standards-compliant solution.

Only Web controls contain the CssClass property. A good example of an element that does not contain the CssClass property is the <ASP:Literal> element. The following example rewrites the previous example to use the CssClass property:

<html>

<head><title>ASP.NET and CSS</title>

<style>

.textbox {

font: 12pt;

font-family: Arial Times New Roman Monospace;

color: black;

}

.label {

font: 14pt;

font-weight: bold;

color: red;

}

</style></head>

<body>

<form runat="server" id="frmTest">

<asp:Label id="lblTest" CssClass="label" runat="Server">Test</Label>

<asp:TextBox id="txtTest" CssClass="textbox" runat="server"/>

</form>

</body></html>

The CssClass property is accessible via your preferred .NET programming language. This allows you to retrieve or set its value via code. A Style property is also available for manipulating inline CSS.

I have never had a project where I used these properties within source code. Using them seems to violate the separation of presentation and code that is hailed as one of the great features of CSS, but I can imagine some application of the property. For example, you could use the CssClass property to alter the appearance of a button once it is selected by a user.

Themes

Themes were added to ASP.NET with version 2.0. It allows you to easily apply and change the visual presentation of a Web application. At first glance, you may think themes and skins are the same as CSS, but they only share similarities.

Themes may control the visual presentation of a Web control using one of many techniques including CSS. So, you may reference CSS or a style sheet within a theme, and the theme will change when the CSS changes.

(Note: Theme property values always override local property values.)

Working with ASP.NET

The more you work with a development platform, the more you learn more about it. For instance, it's interesting how ASP.NET renders certain Web controls. The Label and DataView controls are good examples.

When a Label control is used, the generated HTML output is a <SPAN> element. The DataView control generates a <TABLE> element around your information. You may wish to avoid Label and DataView controls if you abhor the extra markup added to the output. The Literal and Repeater controls provide excellent alternatives. You can play with other controls to see what is generated by ASP.NET.

You may take advantage of ASP.NET's master page feature to incorporate one or more CSS style sheets within every page (or a subset) within a Web application. This provides a central location to place CSS includes.

Separate presentation

CSS separates the presentation of a Web page from its data and design. This allows you to easily swap the look-and-feel of a Web application through the simple switching of CSS resources.

While Microsoft has embraced CSS with its design tools, it has added its own twist with ASP.NET in the CssClass property for Web controls, along with themes. Either way you choose, you can easily build an ASP.NET application that takes advantage of CSS.

Are you embracing Web standards like CSS with your ASP.NET projects? Do you find the CSS-specific features of ASP.NET easy to use? Share your thoughts and experience with the Visual Studio Developer community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox TechRepublic's free Visual Studio Developer newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

5 comments
coldboyqn
coldboyqn

Not a lot of new or interesting information there.

suchisrababanerjee
suchisrababanerjee

Background: We have started an ASP.NET project ? something like drill down a product. The GUI constitutes three frames as below: 1. Left ? represents the drill down tree view control 2. Right ? represents the work area (can be any web forms or an image representing the selected node in the tree view) 3. Bottom ? report area usually a grid view We have decided to use AJAX enabled pages to avoid flicker & CSS control adapter to have a web 2.0 standard. For treeview CSS control adapter we simply wanted to clone and modify css files to create our own designs our own web application. Problem Description: Now we are facing problem with node selection highlighting (i.e. when user clicks on a node) & when the node contains an navigation URL. This works well when we are using simple ASP.NET treeview control but does not work with treeview CSS control adapter. Hope this clarifies the problem. If you need any further info I am eager to send.

Lightsabre
Lightsabre

Working in the government space it's important to develop UIs that are accessible. Most of the time this means "tableless" design. Following this guideline makes working with .Net frustrating at times due to the markup it generates for certain controls. While VS.Net 2008 has better support for CSS, it does not seem to offer pure CSS driven positioning of controls - much like the CSS Adapters project attempts to accomplish. We hope this support is included in future releases. Pure CSS design with semantic markup also makes your web pages device independent which means you only need to build one version.

DaveRogers
DaveRogers

The CSS Friendly Control Adapters (which can be downloaded free from http://www.asp.net/cssadapters/) help to produce less table-based markup. A standard FormView, for instance is wrapped in an HTML table. When using the CSS Friendly Control Adapters, the FormView is rendered within a <div>. If you don't like the HTML rendered by these adapters you can always change them. They are only standard class modules sitting in the App_Code\Adapters folder.

MikJr
MikJr

Thanks for sharing Dave. Looks real interesting. Signing off to go div'n

Editor's Picks