Applying Styles to Controls

  Applying Styles to HTMLControls
  Applying Styles to Web Controls
  Section Summary

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="VB" runat="server" >

    Sub Page_Load(Sender As Object, E As EventArgs)
        MyText.Style("width") = "90px"
        Response.Write(MyText.Style("width"))
    End Sub

</script>

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

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>

<script language="VB" runat="server">
    Sub Page_Load(Src As Object, E As EventArgs)
        Dim MyStyle As New Style
        MyStyle.BorderColor = Color.Black
        MyStyle.BorderStyle = BorderStyle.Dashed
        MyStyle.BorderWidth = New Unit(1)

        MyLogin.ApplyStyle (MyStyle)
        MyPassword.ApplyStyle (MyStyle)
        MySubmit.ApplyStyle (MyStyle)
    End Sub
</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>

VB Style9.aspx [Run Sample] | [View Source]

Section Summary

1. ASP.NET's HTML server control and Web server control families provide first-class support for CSS styles.
2. Styles may be applied by setting either the style or the class attributes of a control. These settings are accessible programmatically through the control's Attributes collection. In the case of HTML server controls, individual values for style-attribute keys can be retrieved from the control's Style collection.
3. Most commonly used style settings are exposed on Web server controls as strongly typed properties of the control itself.
4. The System.Web.UI.WebControls namespace includes a Style base class that encapsulates common style attributes. Many Web server controls expose properties of this type to control individual rendering elements.
5. Styles may be set programmatically on Web server controls using the ApplyStyle method of the WebControl base class.