Use styles, themes, and skins in asp.net 2.0

asp.net

asp.net2.0 themes and skin features enable you to store style and layout information in a separate set of files, always called a theme (Theme). We can then apply this theme to any site to change the look and feel of pages and controls within that site. By changing the content of the subject without changing the individual pages of the site, you can easily change the style of the site. Topics can also be shared among developers.

Asp. NET contains a number of features for customizing the look and feel of the pages and controls for your application. control supports formatting attributes such as font, border, background and foreground color, width, height, and so on, using the style (style) object model. Control also supports the use of style sheets (CSS) to set the style of a control individually. You can use control properties or CSS to define the control's style information, or to store the definition information in a separate set of files (called a theme) and apply it to all or part of the program's pages. Individual control styles are specified with the skin (Skin) properties of the theme.

This article demonstrates how to use styles, themes, and skin features in ASP.net 2.0 with a number of examples.

Apply a style to a control

The Web user interface is very flexible, and the look and feel of different Web sites are very different. Today's widely used style sheets (CSS) are largely responsible for dealing with the rich design requirements that are encountered on the web. Asp. NET HTML server controls and Web server controls are designed to support CSS style sheets with precedence. This section discusses how to use styles on server controls and demonstrates the very subtle control of the look and feel of the Web Forms they provide.

To apply a style to an HTML control

Standard HTML tags support CSS with the style attribute, and we can set it with a semicolon-isolated attribute/value pair (pair). All asp.net HTML server controls can accept styles in the form of standard HTML markup. The following example shows a large number of styles applied to HTML server controls. As you can see in the source code, these styles are passed to the browser when the control is displayed.

This is some literal text inside a styled span control

styled button

click me!

CSS also defines the class attribute, which you can set to . The class attribute allows you to define a style once, and use it on multiple server tags to avoid a duplicate definition of the style. The style property of an HTML server control can be set in this way, as follows:

This is some literal text inside a styled span control

styled button

click me!

When parsing the ASP.net page, in the System.Web.UI.HtmlControls.HtmlControl class, the style information is populated to the style property of the CssStyleCollection type. This property is essentially a dictionary that exposes the style of the control to a collection of values indexed by strings for each style property key. For example, you can use the following code to set and retrieve the width style properties of the HtmlInputText server control:

The following example shows how to programmatically control the style of an HTML server control by using the Style collection property:

<script language= "VB" runat= "Server"
Sub Page_Load (Src as Object, E as EventArgs)
Message.innerhtml &= "message.innerhtml &= "The color of the span is:" &myspan.style ("Color") & "<br>"
Message.innerhtml &= "The width of the textbox is:" &mytext.style ("width") & "<p>"
message.innerhtml &= "Myselect ' s style collection is: <br> <br>"
Dim Keys as IEnumerator
Keys = MySelect.Style.Keys.GetEnumerator ()
Do while (Keys.movenext ())
Dim Key as String
Key = CStr (keys.current)
message.innerhtml &= "<li>"
message.innerhtml &= Key & "=" &myselect.style (key) & "<br>"
Loop
End Sub
Sub Submit_click (Src as Object, E as EventArgs)
message.innerhtml &= "Myspan.style ("color") = Colorselect.value
Mytext.style ("width") = "600"
message.innerhtml &= "The color of the span is:" &myspan.style ("Color") & "<br>"
Message.innerhtml &= "The width of the textbox is:" &mytext.style ("width")
End Sub
</script>