Introduction to the StyleSheet Control
The designer for ASP.NET mobile Web Forms pages facilitates the use of styles within pages through the StyleSheet control. StyleSheet controls can be attached only to ASP.NET mobile Web Forms pages or to mobile user controls. There can be no more than one style sheet per page or control.
Note
The ASP.NET mobile controls do not support cascading style sheets.
.gif "ASP.NET Toolbox Stylesheet")
Each style sheet contains one or more styles. A control references styles with its StyleReference property.
Style sheets are different from templates. Unlike templates, which specify reusable content and controls, style sheets contain information about how controls and content will be rendered. In addition, style sheets can contain templates within their styles. When you apply styles to controls, they replace the controls' default style information and templates.
You define styles in a StyleSheet control using the Styles Editor. The editor derives these styles from styles provided in the ASP.NET mobile controls. Currently, the mobile controls define the Style and PagerStyle styles. Style contains appearance properties common to mobile controls. PagerStyle contains the properties of Style and properties applicable to paginated controls.
Styles to Provide a Consistent Appearance
The StyleSheet control provides a useful tool for giving page content and controls a consistent appearance. For example, you can apply a style to a particular group of controls by putting them in a Panel control and setting the Panel control's StyleReference property to one of the styles in the style sheet.
To provide a consistent look across multiple pages of an application, controls can reference external style sheets. An external style sheet is a mobile user control in an .ascx file that contains a StyleSheet control. To access external styles, a mobile Web Forms page must contain a StyleSheet control. Set the StyleSheet control's ReferencePath property to the path and name of the .ascx file containing the external style sheet.
The styles in the external style sheet are called external styles. The styles in the StyleSheet control attached to the current page are called internal styles. Controls on the page can reference both internal and external styles by name. If an internal style and an external style have the same name, the internal style takes precedence. In this way, applications can use external style sheets to provide default styles across all their pages, while still being able to use internal styles to override the defaults on particular pages.
With external styles, it is possible for circular references to occur. For example, if style A in external style sheet X references style B in external style sheet Y which references A in X, a circular reference results. The circular reference must be resolved or styles will not work.
The designer does not use external styles to render content and controls on a page. However, it renders styles for any control whose StyleReference property refers to an internal style.
Device-Specific Styles
Styles provide a method for pages to tailor the presentation of their content and controls for particular hardware devices. Developers can associate one or more device filters with any style in a style sheet. If a device filter evaluates to true at run time, the style is rendered using a template set and the property overrides values connected to the device filter.
This technique is especially powerful when combined with external style sheets. For instance, an application can use external style sheets and device-specific styles to define a particular set of navigation controls that are targeted at handheld computers. Both the controls and the styles in which they are rendered can easily be added to every page of the application simply by referring to the style.
The same application can use device filters to detect when it is running on a Web-enabled cell phone. It responds by using a different set of style templates and property override values that are appropriate for the phone and that will be applied to every page. When new mobile devices are invented, defining a new set of device-specific templates and property override values effectively ports the application to the new hardware.
You can also use the PropertyOverrides item in the Properties window to apply property override values to a style to customize its appearance for particular devices.
See Also
Tasks
How to: Add and Configure a StyleSheet Control
Concepts
Introduction to the Panel Control