Customizing and Managing Your Site's Appearance / Page 2

[previous] [next]

Customizing and Managing Your Site's Appearance (con't)

Using CSS with Controls

The previous section demonstrated how to use some of the common appearance properties of Web server controls. Although these properties are very useful for customizing the appearance of your Web output, they do not contain the full formatting power of Cascading Style Sheets. Fortunately, you can also customize the appearance of Web server controls using CSS.

There are two ways to harness the power of CSS with Web server controls. The first way is to assign a CSS declaration to the Style attribute/property of a control. For instance, the following example sets the CSS letter-spacing property to increase the whitespace between each letter in the Label to 2 pixels, along with setting the font style to italic.

To achieve the same effect by programming, you would use

Notice that from a programming perspective, the Style property is a named collection. A named collection acts like an array, except that individual items can be retrieved either through a zero-based index or a unique name identifier.

All styles added to a control, whether declaratively or programmatically, are rendered in the browser as an inline CSS rule. For instance, either of the two previous two examples would be rendered to the browser as

The other way to use CSS with Web server controls is to assign a CSS class to the CssClass property of a control. For instance, assume that you have the following embedded CSS class definition.

You could assign this CSS class via

To achieve the same effect by coding, you would use

Listings 6.1 and 6.2 demonstrate how to style Web server controls with CSS by using both the Style and CssClass properties. The markup contains three Label controls, each of which contain a paragraph of text. The form also contains two DropDownList controls. The first changes the CSS text-transform property (which changes the text from uppercase to lowercase) for two of the Label controls. The second DropDownList control sets the other Label control's CssClass property to one of two predefined CSS classes, both of which float the paragraph so that it becomes a pull quote relative to the other text (see Figure 6.1).

Although the example in Listing 6.1 uses embedded styles (that is, CSS rules within an HTML <style> element), you should generally locate a page's CSS in an external file and then link to it using the element. By doing so, multiple pages in the site can use the same CSS file. As well, using an external CSS file generally reduces the page's bandwidth, because the browser can cache the CSS file.

Listing 6.1 Using CSS.aspx

The code-behind class (shown in Listing 6.2) for this example is quite straightforward. It contains selection event handlers for the two DropDownList controls. The first of these changes the text-transform CSS property of two Label controls based on the user's selection; the second sets the CSS class of the pull quote Label based on the user's selection.

Listing 6.2 Using CSS.aspx.cs

Appearance Properties, CSS, and ASP.NET

The intent of CSS is to separate the visual presentation details from the structured content of the HTML. Unfortunately, many ASP.NET authors do not fully take advantage of CSS, and instead litter their Web server controls with numerous appearance property settings (e.g., BackColor, BorderColor, etc.). Although it is true that these properties are rendered as inline CSS styles, the use of these properties still eliminates the principal benefit of CSS: the capability to centralize all appearance information for the Web page or Web site into one location, namely, an external CSS file. Also, because the appearance properties are rendered as inline CSS, this increases the size and the download time of the rendered page.

By limiting the use of appearance properties for Web server controls within your Web Forms, and using instead an external CSS file to contain all the site's styling, your Web Form's markup becomes simpler and easier to modify and maintain. For instance, rather than setting the Font property declaratively for a dozen Web server controls in a page to the identical value, it makes much more sense to do so via a single CSS rule. And if this CSS rule is contained in an external CSS file, it could be used throughout the site (that is, in multiple Web Forms), reducing the overall amount of markup in the site.

However, ASP.NET 2.0 does provide an additional mechanism for centralizing the setting the appearance of Web server controls on a site-wide basis, called themes and skins, which is our next topic.

[previous] [next]

URL: