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:



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


.textbox {

font-size: 12pt;

font-family: Arial Times New Roman Monospace;

color: black;





<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"/>



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.


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:


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


.textbox {

font: 12pt;

font-family: Arial Times New Roman Monospace;

color: black;


.label {

font: 14pt;

font-weight: bold;

color: red;




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

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

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



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

By Tony Patton

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