Cascading style sheets (CSS) are a simple way to add consistent styling to your Web applications. Information such as font face, page background, and text size can all be stored in one central location. Even larger than your Web application, one style sheet can be applied to your whole Web site. This is a powerful tool! Without style sheets, changing the design of your Web site could forseeably require hundreds of page edits. Mastering cascading style sheets will save you time and add another tool to your arsenal of Web development skills.
Style sheets can be linked to any page by simply adding one line of code in the <head> section of the HTML:
<link href='http://www.mysite.com/MyCSS.css' rel="stylesheet" type="text/css">
This will render the HTML according to the styles stated in the CSS file.
Visual Studio .NET's Support for Style Sheets
Visual Studio .NET includes a nice interface to design your own style sheets with little or no knowledge of CSS syntax. To add a style sheet to your ASP.NET project, right-click your solution in the Solution Explorer. Select Add/Add New Item. In the list of available items, select Style Sheet. In the space provided, type a file name, as demonstrated in Figure 18.7.
Figure 18.7. Select Style Sheet and Type in a Name for Your New File.
Visual Studio .NET will open the new Style Sheet and insert a BODY tag, as shown in Figure 18.8. This is where general document design will be specified. This includes page attributes such as background, borders, font face, and size.
Figure 18.8. Visual Studio .NET Opens the New File and Inserts a BODY Tag.
From this point, you can put Visual Studio .NET in the driver's seat. In the CSS Outline pane, expand the Elements folder. Right-click BODY and select Build Style.
This opens the Style Builder and allows you to visually design your style sheet. You can select from multiple categories including font, background, and bullet styles.
Visual Studio .NET will write out the correct CSS code into the appropriate Element (in this case, BODY), as you can see in Figure 18.9.
Figure 18.9. Using the Style Builder, You Can Visually Edit Your Style Sheet.
Other features such as link styles are available by right-clicking the Elements folder and selecting Add Style Rule. In the Add Style Rule window, you can add one or more Element or even custom classes.
For instance, adding Element A:Hover will allow you to change to the color and font styles of a link when the mouse pointer hovers over it.
You edit new Elements in the same way you edited the BODY tag. Right-click its entry in the Elements folder in the CSS Outline pane and select Build Style. This is shown in Figure 18.10.
Figure 18.10. Adding a New Element to the Style Sheet
NOTE: Visual Studio .NET provides a quick jumpstart to style sheet creation. You may wish to use CSS features that Visual Studio .NET doesn't automate.
Using the code window, you can easily write your own CSS code.
For more information on cascading style sheets, visit http;//www.w3.org/Style/CSS. A good book that you might consider using is Danny Goodman's Dynamic HTML: The Definitive Reference (O'Reilly, 1998).
In the sample application seen in Figure 18.11, I show an example of how you can expand on the concept of style sheets by offering multiple style sheets to users.
Figure 18.11. CSS Demo Application
The application consists of a form (default.aspx) with a drop-down box containing six styles. The autopostback attribute is set to true, causing the page to reload automatically upon user selection.
Six simple style sheets that manipulate background and text color are located in the root directory. These include StyleSheet1.css, StyleSheet2.css, StyleSheet3.css, and so on.
In the default.aspx source, the selected style sheet is written into the HTML:C#
<link href='<%Response.Write(Session["CurrentStyle"].ToString());%>' rel="stylesheet" type="text/css">VB
<link href='<%Response.Write(Session("CurrentStyle").ToString())%>' rel="stylesheet" type="text/css">
The selected style sheet is stored in the session variable "Current Style". Response.Write() writes out the selected style sheet name to the HTML.
In the code behind, the work is done in the Page_Load() method:C#
Session["CurrentStyle"] = "StyleSheet" + StyleList.SelectedValue + ".css";VB
Session("CurrentStyle") = "StyleSheet" + StyleList.SelectedValue + _ ".css";
Here we create a session variable and insert the selected style sheet URL into it. The code will work fine at this point. We have the user selection stored in a session variable and the appropriate code to attach it to the display code.
The remaining code deals solely with viewing the current style sheet code:C#
string strFilePath = Request.MapPath( ".\\" + Session["CurrentStyle"].ToString() ); StreamReader objReader = File.OpenText( strFilePath ); CurrentStyle.Text = objReader.ReadToEnd(); objReader.Close();VB
Dim strFilepath As String = Request.MapPath( ".\" + _ Session("CurrentStyle").ToString() ) Dim objReader As StreamReader = File.OpenText( strFilePath ) CurrentStyle.Text = objReader.ReadToEnd() objReader.Close()
In short, the selected style sheet's contents is read and displayed in the Text Box "CurrentStyle".
Although relatively simple, this concept can easily be expanded upon. For example, one of my classes wrote an Online Training application. We allowed users to select from several different styles. Their selection was saved in a cookie.