Home   |   QuickStart Welcome   |   ASP.NET   |   Web Services   |   How Do I...?   
  |   I want my samples in...      

ASP.NET 2.0 Quickstart Tutorials

Applying Styles to Controls

The Web is a flexible environment for user interfaces, with extreme variations in the look and feel of different Web sites. The widespread adoption of cascading style sheets (CSS) is largely responsible for the rich designs encountered on the Web. All of ASP.NET's HTML server controls and Web server controls have been designed to provide first-class support for CSS styles. This section discusses how to use styles in conjunction with server controls and demonstrates the very fine control over the look and feel of your Web Forms that they provide.

Applying Styles to HTML Controls

Standard HTML tags support CSS through a style attribute, which can be set to a semicolon-delimited list of attribute/value pairs. For more information about the CSS attributes supported by the Internet Explorer browser, see MSDN Web Workshop's CSS Attributes Reference page. All of the ASP.NET HTML server controls can accept styles in exactly the same manner as standard HTML tags. The following example illustrates a number of styles applied to various HTML server controls. If you view the source code on the page returned to the client, you will see that these styles are passed along to the browser in the control's rendering.

VB Style1.aspx
Run Sample View Source

CSS also defines a class attribute, which can be set to a CSS style definition contained in a <style>...</style> section of the document. The class attribute makes it easy to define styles once and apply them to several tags without having to redefine the style itself. Styles on HTML server controls also can be set in this manner, as demonstrated in the following sample.

VB Style2.aspx
Run Sample View Source

When an ASP.NET page is parsed, the style information is populated into a Style property (of type CssStyleCollection) on the System.Web.UI.HtmlControls.HtmlControl class. This property is essentially a dictionary that exposes the control's styles as a string-indexed collection of values for each style-attribute key. For example, you could use the following code to set and subsequently retrieve the width style attribute on an HtmlInputText server control.

		
<script language="C#" runat="server" >

    void Page_Load(Object sender, EventArgs E) {
        MyText.Style["width"] = "90px";
        Response.Write(MyText.Style["width"]);
    }

</script>

<input type="text" id="MyText" runat="server"/>
C#

This next sample shows how you can programmatically manipulate the style for an HTML server control using this Style collection property.

VB Style3.aspx
Run Sample View Source

Applying Styles to Web Server Controls

Web server controls provide an additional level of support for styles by adding several strongly typed properties for commonly used style settings, such as background and foreground color, font name and size, width, height, and so on. These style properties represent a subset of the style behaviors available in HTML and are represented as "flat" properties exposed directly on the System.Web.UI.WebControls.WebControl base class. The advantage of using these properties is that they provide compile-time type checking and statement completion in development tools such as Microsoft Visual Studio .NET.

The following sample shows a WebCalendar control with several styles applied to it (a calendar without styles applied is included for contrast). Note that when setting a property that is a class type, such as Font, you need to use the subproperty syntax PropertyName-SubPropertyName .

VB Style4.aspx
Run Sample View Source

The System.Web.UI.WebControls namespace includes a Style base class that encapsulates common style attributes (additional style classes, such as TableStyle and TableItemStyle, inherit from this common base class). Many Web server controls expose properties of this type for specifying the style of individual rendering elements of the control. For example, the WebCalendar exposes many such style properties: DayStyle, WeekendDayStyle, TodayDayStyle, SelectedDayStyle, OtherMonthDayStyle, and NextPrevStyle. You can set individual properties of these styles using the subproperty syntax PropertyName-SubPropertyName, as the following sample demonstrates.

VB Style5.aspx
Run Sample View Source

A slightly different syntax allows each Style property to be declared as a child element nested within Web server control tags.

<ASP:Calendar ... runat="server">
    <TitleStyle BorderColor="darkolivegreen" BorderWidth="3"
            BackColor="olivedrab" Height="50px" />
</ASP:Calendar>
The following sample shows alternative syntax but is functionally equivalent to the preceding one.

VB Style6.aspx
Run Sample View Source

As with HTML server controls, you can apply styles to Web server controls using a CSS class definition. The WebControl base class exposes a String property named CssClass for setting the style class:

VB Style7.aspx
Run Sample View Source

If an attribute is set on a server control that does not correspond to any strongly typed property on the control, the attribute and value are populated in the Attributes collection of the control. By default, server controls will render these attributes unmodified in the HTML returned to the requesting browser client. This means that the style and class attributes can be set on Web server controls directly instead of using the strongly typed properties. While this requires some understanding of the actual rendering of the control, it can be a flexible way to apply styles as well. It is especially useful for the standard form input controls, as illustrated in the following sample.

VB Style8.aspx
Run Sample View Source

Web server control styles can also be set programmatically, using the ApplyStyle method of the base WebControl class, as in the following code.

		
<script language="C#" runat="server">
    void Page_Load(Object Src, EventArgs E ) {
        Style style = new Style();
        style.BorderColor = Color.Black;
        style.BorderStyle = BorderStyle.Dashed;
        style.BorderWidth = 1;

        MyLogin.ApplyStyle (style);
        MyPassword.ApplyStyle (style);
        MySubmit.ApplyStyle (style);
    }
</script>

Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
View:  <ASP:DropDownList id="MySelect" runat="server">  ...  </ASP:DropDownList>
C#

The following sample demonstrates the code above.

VB Style9.aspx
Run Sample View Source