ASP.NET Server 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.
Note Web Forms pages (.aspx files) function as HTML pages at run time. You can therefore use cascading style sheets (CSS) to set the appearance of any elements on the page other than Web server controls. For details, see Applying a CSS Style to Another Web Page.
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 cascading stylesheets (CSS), the appearance properties are rendered as style attributes of the HTML elements that make up the control. For example, if you create a LinkButton Web server control and set its ForeColor property to Red, its FontInfo.Bold property to true, and its FontInfo.Size property to xx-small, the control is rendered as the following if the user's browser supports stylesheets:
<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:
<a id="HyperLink1"><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 downlevel browsers. For more information, see ASP.NET Server Controls and Browser Capabilities.
Control Style Objects
In addition to simple 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, 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 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 TableItemStyle, because they are setting the attributes of table cells. The Font style object is of type FontStyle.
Precedence and Inheritance of Style Objects
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.
- Appearance properties of the base Calendar control
- DayStyle style object
- WeekendDayStyle style object
- OtherMonthDayStyle style object
- TodayStyle style object
- 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. The CSSClass property enables you to assign a stylesheet class to the control. The CSSStyle property enables you to 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, even though the control will render with a red background. Furthermore, if you set both appearance properties and the CSSStyle property, the individual appearance properties take precedence over the CSSStyle property.