Adding Cascading Style Sheets to Themes
| As an alternative to Skins, you can use a Cascading Style Sheet file to control the appearance of both the HTML elements and ASP.NET controls contained in a page. If you add a Cascading Style Sheet file to a Theme folder, then the Cascading Style Sheet is automatically applied to every page to which the Theme is applied. For example, the Cascading Style Sheet in Listing 6.13 contains style rules that are applied to several different HTML elements in a page. Listing 6.13. App_Themes\StyleTheme\SimpleStyle.css
If you add the SimpleStyle.css file to a Theme named StyleTheme (a folder named StyleTheme in the App_Themes folder), then the Cascading Style Sheet is applied automatically to the page in Listing 6.14. Listing 6.14. ShowSimpleCSS.aspx
The Cascading Style Sheet is used to style several HTML elements in Listing 6.14 (see Figure 6.4). For example, the Style Sheet sets the background color of the page to the value Gray. It also centers the <div> tag containing the page content. Figure 6.4. Styling with Cascading Style Sheets. Because an ASP.NET control renders HTML, the Style Sheet also styles the HTML rendered by the ASP.NET Label, TextBox, and Button controls. An ASP.NET Label control renders an HTML <label> tag and the Style Sheet formats all <label> tags in bold. Both a TextBox control and a Button control render HTML <input> tags. The Style Sheet modifies the border and background color of the <input> tag. Notice that the Button control includes a CssClass attribute. By providing a control with a CssClass attribute, you can target a particular control (or set of controls) in a Cascading Style Sheet. In this case, the background color of the <input> tag rendered by the Button control is set to the value #eeeeee (light gray). I recommend that you do all your web page design by using the method discussed in this section. You should place all your page design in an external Cascading Style Sheet located in a Theme folder. In particular, you should not modify the appearance of a control by modifying its properties. Furthermore, you should avoid using Skin files. The advantage of using Cascading Style Sheets is that they result in leaner and faster loading pages. The more content that you can place in an external Style Sheet, the less content must be loaded each time you make a page request. The contents of an external Style Sheet can be loaded and cached by a browser and applied to all pages in a web application. If, on the other hand, you modify the appearance of a control by modifying its properties, then additional content must be rendered to the browser each time you make a page request. For example, if you modify a Label control's BackColor property, then an additional Style attribute is rendered when the Label control is rendered. Using Skins is no different than setting control properties. Skins also result in bloated pages. For example, if you create a Skin for a Label control, then the properties of the Label Skin must be merged with each Label control on each page before the Label is rendered. Note In this book, you will notice that I try to avoid formatting controls by using control properties. Instead, I perform all the formatting in a Style Sheet embedded in the page (using the <style> tag). I would prefer to place all the control formatting in an external Style Sheet, but that would require creating a separate file for each code sample, which would make this book much longer than it already threatens to be. Adding Multiple Cascading Style Sheets to a ThemeYou can add as many Cascading Style Sheet files to a Theme folder as you need. When you add multiple Cascading Style Sheets to a Theme, all the Cascading Style Sheets are applied to a page when the Theme is applied to a page. The order in which an external Style Sheet is linked to a page can be important. For example, style sheet rules in one Style Sheet can override style sheet rules in another Style Sheet. When you add multiple Style Sheets to a Theme, the style sheets are linked to a page in alphabetical order (in the order of the Style Sheet file name). For example, if the Theme contains three Style Sheet files named ThemeA.css, ThemeB.css, and ThemeC.css, then the following three links are added to a page: <link href="App_Themes/Simple/ThemeA.css" type="text/css" rel="stylesheet" /> <link href="App_Themes/Simple/ThemeB.css" type="text/css" rel="stylesheet" /> <link href="App_Themes/Simple/ThemeC.css" type="text/css" rel="stylesheet" /> If you want to control the order in which Style Sheets are applied to a page, then you need to follow a naming convention. Changing Page Layouts with Cascading Style SheetsBecause you can use a Cascading Style Sheet to change the layout of a page, you can use a Theme to control page layout. For example, the page in Listing 6.15 contains three <div> tags. By default, if you open the page, the contents of the <div> tags are stacked one on top of another (see Figure 6.5). Figure 6.5. Page without Cascading Style Sheet. Listing 6.15. ShowLayout.aspx
If you add the Cascading Style Sheet in Listing 6.16, you can modify the layout of the <div> tags (see Figure 6.6). The Style Sheet in Listing 6.16 displays the <div> tags in three columns. (The Stylesheet floats each of the <div> tags.) Figure 6.6. Using a floating layout. Listing 6.16. Float.css
Alternatively, you can position the <div> tags absolutely by using the left and top style properties. The Style Sheet in Listing 6.17 reverses the order in which the three <div> tags are displayed (see Figure 6.7). Figure 6.7. Using an absolute layout. Note The Cascading Style Sheets in this section work equally well with Internet Explorer 6, Firefox 1, and Opera 8. Listing 6.17. Absolute.css
The point of this section is to demonstrate that Cascading Style Sheets are very powerful. You can create elaborate website designs simply by creating the right Style Sheet. If you want to see some samples of some amazing website designs performed with Cascading Style Sheets, visit the CSS Zen Garden located at http://www.CSSZenGarden.com. |
