When the page runs, appearance properties are rendered according to the capabilities of the user's browser. If the user's browser supports cascading style sheets (CSS), the appearance properties are rendered as style attributes of the HTML elements that make up the control. For example, if you define a Hyperlink Web server control and set its

ForeColor property to Red, its Bold property to true, and its Size property to xx-small, the control is rendered as the following if the user's browser supports style sheets:

Visual BasicВ	Copy Code
<a id="HyperLink1" style="color: Red; font-size: XX-Small; font-weight: bold;">HyperLink</a>

C#В	Copy Code
<a id="HyperLink1" style="color: Red; font-size: XX-Small; font-weight: bold;">HyperLink</a>

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 does not support styles:

Visual BasicВ	Copy Code
<a id="A1"><b><font color="Red" size="1">HyperLink</font></b></a>

C#В	Copy Code
<a id="A1"><b><font color="Red" size="1">HyperLink</font></b></a>

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 browsers that do not support styles. For more information, see ASP.NET Web Server Controls and Browser Capabilities.

In addition to appearance properties such as ForeColor and BackColor, controls expose one or 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, and Bold.

Some controls expose style objects you can use to set the appearance of specific portions of the control. For example, the Calendar Web server 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 Style or TableItemStyle, because they are setting the attributes of table cells. The Font property is of type FontInfo.

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

This inheritance means that style-object properties you set have an order of precedence. For example, the following list shows the order of style-object properties for the Calendar 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. TodayDayStyle style object.

6. SelectedDayStyle style object.

In addition to the appearance properties and style objects, controls expose two properties that allow you to manipulate CSS styles more directly: CssClass and Style. The CssClass property enables you to assign a style sheet class to the control. The Style property enables you to set a string of style attributes to be written as-is to the control. Using the Style property allows you to set style attributes that are not exposed via other properties. The Style property exposes a collection whose methods, such as Add and Remove, you can call to set styles directly.

Settings you make in the Style property are not reflected in the corresponding individual appearance property. For example, if you set a string background-color:red in the Style property, the BackColor property is not also set to red, even though the control will render with a red background. If you set both appearance properties and the Style property, the individual appearance properties take precedence over the Style property.

Concepts

Other Resources