NGWS SDK Documentation  

This is preliminary documentation and subject to change.
To comment on this topic, please send us email at ngwssdk@microsoft.com. Thanks!

Web Forms Controls and CSS Styles

You can control the look of controls by setting various appearance properties such as ForeColor, BackColor, Height, and Width. In addition, some controls support style objects that expose additional style-related settings.

The sections below provide information about how style information is rendered to the browser and how to work with styles both at design time and programmatically.

Rendering Appearance Properties to the Browser

When the page runs, appearance properties are rendered according to the capabilities of the user's browser. If the user's browser supports CSS stylesheets, the appearance properties are rendered as style attributes of the HTML elements that make up the control. For example, if you create a Textbox Web control and set its ForeColor property to red, and if the user's browser supports stylesheets, the control is rendered as the following:

<INPUT name="TextBox1" type="Text" id="TextBox1" style="color:red">

On the other hand, if the user's browser does not support styles, the control is rendered using other means, such as a <FONT> element. The following shows the rendering for the example from above, but for a browser that doesn't support styles:

<INPUT name="TextBox1" type="Text" id="TextBox1">

Other examples of properties that are rendered differently depending on the browser are BorderWidth and BorderColor.

Some appearance properties, such as BorderStyle cannot be rendered without using styles. These properties are therefore ignored in downlevel browsers.

Control Style Objects

In addition to simple appearance properties such as ForeColor and BackColor, controls expose one ore more style objects that encapsulate additional appearance properties. One example is the Font style property, which exposes an object of type FontInfo containing individual properties pertaining to the font, such as Size, Name, Bold, and so on.

Some controls expose style objects you can use to set the appearance of specific portions of the control. For example, the Calendar Web control contains style objects such as DayStyle (individual days), SelectedDayStyle (a day, week, or month selected by the user), and WeekendDayStyle. Using the SelectedDayStyle style object, for example, you can set the BackColor and ForeColor properties of the day selected by the user.

Most style objects are of type TableItemStyle, because they are setting the attributes of table cells. The Font style object is of style FontStyle.

Precedence and Inheritance of Style Objects

In complex controls, style objects often inherit characteristics from other style objects. For example, in the Calendar Web control, the SelectedDayStyle object is based on the DayStyle object. If you don't explicitly set any properties for SelectedDayStyle, it inherits its characteristics from DayStyle.

This inheritance means that style-object properties you set have precedence. For example, the following list shows the precedence of style-object properties for the Calendar Web control, with the highest precedence given to the settings on the object last on the list.

  1. Appearance properties of the base Calendar control
  2. DayStyle style object
  3. WeekendDayStyle style object
  4. OtherMonthDayStyle style object
  5. TodayStyle style object
  6. SelectedDayStyle style object

Controlling CSS Styles and Classes Directly

In addition to the appearance properties and style objects, controls expose two properties that allow you to manipulate CSS styles more directly: CSSStyle and CSSClass. By setting the CSSStyle property, you can set a string of style attributes to be written as-is to the control. Using the CSSStyle property allows you to set style attributes that are not exposed via other properties.

Settings you make in the CSSStyle property are not reflected in the corresponding individual appearance property. For example, if you set a string background-color:red in the CSSStyle property, the BackColor property is not also set to red. Furthermore, if you set both appearance properties and the CSSStyle property, the individual appearance properties take precedence over the CSSStyle property.

The CSSClass property allows you to assign a stylesheet class to the control.

See Also

Web Forms Server Controls