ASP.NET Web Server Controls and CSS Styles
You can control the look of ASP.NET server 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.
.gif "Note") Note |
|---|
ASP.NET Web pages 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. In addition, you can define ASP.NET themes that include cascading style sheet settings, and then apply themes to pages or to your site. For details, see ASP.NET Themes and Skins. |
The sections below provide information about setting styles directly, including 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 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:
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
<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="a1"><b><font color="red" size="1">HyperLink</font></b></a>
<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.
Control Style Objects
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.
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.
TodayDayStyle style object.
SelectedDayStyle style object.
There can be difficulties with styles when they are split between a container element and a text element. For example, suppose you have a style sheet for a control and you want the text style properties to be applied to a link and the rest of the style to be applied to a container. This is feasible if you set the styles using the style properties of the control, such as MenuItemStyle for a menu control or TodayDaySyle for a calendar control. But it is more difficult using styles defined by a CssClass property, because ASP.NET has no way to know the contents of the class on the server. ASP.NET applies the styles defined in the CssClass property to both the text and the container elements and adds an inline style to suppress the effects of this double application (double borders, proportional font multiplication, and so on).
The best way to style a control is to use the style properties defined by the control and to use a style sheet or inline styles to make minor adjustments to individual elements if necessary. To override a style defined by a control's style properties, use the !important CSS rule in a style sheet or inline styles.
The following code example uses the CssClass property on the hovernodestyle element. This class is defined twice as myclass and as a.myclass:visited so that it overrides the a:visited definition.
<%@ Page Language="C#" %>
<html>
<head runat="server">
<asp:sitemapdatasource id="SiteMapSource" runat="server" />
<style type="text/css">
a:visited
{
color: #000066
}
myclass, a.myclass:visited {
color: #FF0000
}
</style>
</head>
<body>
<form runat="server">
<a href="https://www.Contoso.com">Contoso</a>
<asp:treeview id="treeview1" runat="server"
initialexpanddepth="1"
datasourceid="SiteMapSource"
forecolor="#444444"
font-names="Verdana"
font-size="0.8em">
<nodestyle font-bold="true" />
<hovernodestyle cssclass=myclass />
</asp:treeview>
</form>
</body>
</html>
If you use cascading style sheets (CSS) to customize the appearance of a control, use either inline styles or a separate CSS file, but not both. Using both inline styles and a separate CSS file can cause unexpected results.
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: 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 stringbackground-color:redin 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.
See Also
Concepts
ASP.NET Web Server Controls and Browser Capabilities