Cascading style sheets is a specification that allows developers to control all aspects of the appearance of a page. Cascading style sheets styles can be applied at different levels. You can apply a style to all instances of an HTML tag for instance, all <P> tags, or all <TEXTAREA> tags. You can also apply a style to a class of controls. For example, you could declare an error class, apply that class to several different tags by including a class attribute, and then control the appearance of many objects with a single class. Finally, cascading style sheets styles may be applied to specific IDs.
Note
It is useful to think about the different ways in which cascading style sheets styles can be applied, and when to use each. For example, when you want to style all instances of a given HTML element, applying the style to that HTML tag makes sense. If, on the other hand, you have a style that you want to apply to some, but not all, of a particular HTML tag, or even some of a number of different HTML tags, applying the style to a class and identifying the tags you want styled as belonging to that class makes the most sense. Finally, if you have a style that you want to apply to a particular element, and only that element, applying the style to a particular ID makes sense. In the examples in this book, cascading style sheets styles will be applied at each of these three levels.
Thinking about the layout in Figure 3-12, it might be useful to first look at a similar page created by using cascading style sheets. Figure 3-16 shows such a page.
Figure 3-16: A page layout similar to that shown in Figure 3-12, using cascading style sheets
The markup for the page shown in Figure 3-16 is in the WebPageLayout project in a file called CSSLayout.aspx, shown in Listing 3-1.
Listing 3-1: CSSLayout.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CSSLayout.aspx.cs" Inherits="CSSLayout" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Cascading Style Sheets Layout</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /></head><body> <form runat="server"> <div >Menu</div> <div >Banner</div> <div >Main Content. This is where the main text or Web form on the application will be.</div> </form></body></html>
A great deal of this markup is the standard Visual Studio generated template markup. At the very top of a Web page markup is the @Page directive. The Language attribute specifies the programming language used in the page, in this example, C#. The AutoEventWireup attribute specifies whether events are automatically wired up, based on the name of event handlers in the class. The default value is true, and Visual Studio 2005, unlike earlier versions, sets the attribute to true. With AutoEventWireup set to true, event wireup is automatic, and a method named Page_Load will automatically be called when the page is loaded. CodeFile points to the file where the code of the page will be located, and Inherits points to the name of the class (which must be directly or indirectly based on the Page class). CodeFile replaces the previous Codebehind attribute, although the older attribute is still supported.
Here is the line that specifies the cascading style sheets (.css) file to use when rendering the page.
One important feature of Visual Studio is the ability to easily create these .css file link tags. When you add a .css file to the solution, you can simply drag the file from Solution Explorer and drop it on the form, and a link similar to the one shown in the sample will be added to the markup on the page.
Inside the form on the page (again, the form is part of the standard template that Visual Studio creates), I added a few div tags. A div tag can be used to divide a Web page into separate sections, either to logically group sections or, more commonly, to apply different formatting to different sections of the page. In this example, I created separate div tags with self-explanatory IDs of menu, banner, and mainContent. Note that the order of the div tags is in fact not the order in which I most likely would want the content to appear. Generally, the banner would be at the very top of the page, with the menu and main content below the banner. In this example, the physical order of the div tags does not matter, because of the .css file linked above. Before looking at the .css file in detail, it is interesting to see what CSSLayout.aspx would look like if the link to the .css file were removed. Figure 3-17 shows this scenario.
Figure 3-17: CSSLayout.aspx without the .css file link
The output is quite different without the .css file. So, what exactly is in StyleSheet.css that creates such a different appearance? Listing 3-2 shows the entire file.
First, the style sheet defines a font family to be applied to the body tag, essentially applying the style to all elements of the page. Although the style for the body tag refers to a single font, this attribute could specify more than a single font in the same family, to ensure that one of the specified fonts will be found. For instance, to ensure that any client would see the page using one of the popular sans serif fonts, the body style could have been defined as follows.
body { font-family:Arial Verdana Sans Serif; }
The next three styles defined in StyleSheet.css are to be applied, specifically, to a div element identified by a particular ID. For instance, the first style is identified by DIV#banner, meaning that it applies only to a div tag with an ID of banner. Again, the implication of using this sort of style is that the style will apply to a single element only. In this example, that is exactly the desired effect.
Several cascading style sheets attributes are applied to all of the DIV#<id name> styles. First, each defines a border property with a value of dotted 1 px. This is solely for illustrative values, but the border property can be used to create some interesting effects. In this example, I used the border property as a shortcut to access some individual properties, such as border-width and border style. A complete explanation of the border settings possible with cascading style sheets is beyond the scope of this book, but many books and online resources completely document this property.
The position property is set to absolute. The alternative values for position are static, relative, fixed, and inherit. Using any of the other values for position would result in wildly different layouts on this standard page, generally displaying the page elements in the order in which the div tags appear on the page.
The next set of common properties specified are also related to the position of the elements on the page, but in this case specifying left, top, height, and width. These properties can be set to absolute values, commonly in pixels (as in this example) or percentages of the height or width of the containing block. The specific values set in this example are not arbitrary. For instance, the banner has a top and left of 0, a height of 100, and a width of 500. The top property of the menu and mainContent are both set to 100, so that they nest directly under the banner. The left of the menu style is set to 0, and the left of mainContent is set to 120, which is the same as the width property of the menu.
The banner and the menu have the background-color property set to silver, one of the allowed named colors. The banner also has several properties set. In addition to the previously visited font-family property (set to Comic Sans MS for the banner), the font-size property is set to xx-large and the text-align property is set to center.
If you compare this example to the example using HTML tables to lay out a page, you might wonder what advantage cascading style sheets offers. Rather than a single page with markup, you have a page with markup and a separate page with the styles to apply to the markup. One advantage is that the same styles can be applied to a great number of pages, simply by linking StyleSheet.css. More important, perhaps, is the ability to dramatically change the appearance of a page by modifying styles. The modifications include styles that would be difficult, if not impossible, to duplicate by using HTML tables. For instance, look at Figure 3-18, showing CSSLayout2.aspx. This file has the exact same markup as CSSLayout.aspx, shown in Figure 3-16, but it uses a different style sheet.
Figure 3-18: The same page as shown in Figure 3-16 (CSSLayout.aspx), with a different .css file
The style sheet, StyleSheet2.css, is shown in Listing 3-3.
You will notice several differences in this style sheet. First, the body style has an added background-color attribute. In practice, this could be a background image, or anything to add interest to the design.
Next, the position of each style ensures that the background appears around all of the other elements on the page. Also, the mainContent style adds a background color (white), to ensure that it stands out from the page background. Finally, when I changed the background color, the text in the main content section looked a little strange, so I added a padding property and set the padding for the top, bottom, left, and right.
With relatively simple changes to the style sheet, the look of the page changed dramatically. Using style sheets allows developers to separate the content from the presentation. Looking at the markup in Listing 3-1, you will see that nothing specifies the appearance of the rendered page. Other than a bit of boilerplate markup, the only markup on the page is the link to the .css file and the div tags that contain the content.
One question you might have is, How will I remember all of the possible properties possible in a cascading style sheets style? Fortunately for Visual Studio users, the answer is by editing their .css files in Visual Studio. Figure 3-19 shows IntelliSense options that are available when you edit a .css file.
Figure 3-19: IntelliSense options available when editing a .css file in Visual Studio
As an alternative, you can view the Properties window while editing a style, as shown in Figure 3-20.
Figure 3-20: The Properties window, available while editing a .css file in Visual Studio
If you click the button with ellipses (), a dialog box such as that shown in Figure 3-21 appears, allowing you to edit all aspects of the style by using convenient editors.
Figure 3-21: The Style Builder dialog box in Visual Studio
