Managing Appearance with Cascading Style Sheets in Visual C#.NET

Maker QR Code in Visual C#.NET Managing Appearance with Cascading Style Sheets

CSS rules that control an entire Web page provide more consistent control over appearance than inline styles or HTML attributes applied to individual elements. Page-level CSS rules, however, provide no control over groups of Web pages, and thus no guarantee of consistency among them. To provide such consistency, a single collection of CSS rules would have to control multiple Web pages. This is exactly what linked style sheets provide. Using linked style sheets is a fourstep process:

created in step 1. page elements so that they refer to those classes or IDs. The next four sections explain how to perform each of these steps.

21

Using a template is the simplest and easiest way to add a style sheet file to a Web site. As usual, there are two ways to begin. Here s the first:

The second procedure uses the New Page drop-down menu on the Standard toolbar. Proceed as follows:

New Page Style:

Following either of these procedures and then clicking the Style Sheets tab displays the Page Templates dialog box shown in Figure 21-10. To continue creating the style sheet file:

Preview areas in the dialog box. Here are some guidelines for choosing a template:

controls the kinds of properties you want instead of one that provides correct property values. Values are easier to change later than the list of properties.

21

template into the Design view editing window, as shown in Figure 21-11. The Arcs template created the results shown in this figure.

Figure 21-11. The Arcs style sheet template produces these results. Style sheets have no appearance of their own, so FrontPage displays them as code.

Managing Appearance with Cascading Style Sheets A quick glance at the figure reveals that CSS files don t appear in any sort of WYSIWYG view. The Design, Split, Code, and Preview tabs that normally appear at the bottom of the window are completely absent. Although style sheets definitely control the appearance of Web pages, they have no appearance of their own. FrontPage must therefore display them as code.

Save As from the File menu. A common file name for a Web site s main CSS file is styles.css. The number of CSS files you add to a Web site is totally at your discretion, but having only one such file is a good option to consider. Having only one CSS file implies that all the pages in your Web site inherit the same general appearance from the same central location. If some pages contain unique elements, set up unique class rules to accommodate them. If you don t want to use templates for creating CSS files not even the Normal Style Sheet template, which is blank you can create them in Microsoft Notepad or any other text editor, save them, and then import them to your Web site.

For more information about importing files, refer to Importing Web Files and Folders, on page 175. 21

The procedure for adding and modifying rules in a CSS style sheet file is the same as that for adding and modifying rules in an ordinary Web page:

2 To create a new rule, click the New button. This displays the New Style dialog box,

shown previously in Figure 21-9.

click the Modify button. This displays the Modify Style dialog box, shown previously in Figure 21-7.

For instructions on using the New Style and Modify Style dialog boxes, refer to Assigning Style Sheet Properties, later in this chapter.

If you understand CSS code, another option is to directly modify the CSS rules displayed in the Design view window.

The simplest and easiest way of linking a style sheet file to a Web page involves only two steps:

1 Open the page in Design view. 2 Drag the style sheet file from the Folder List to the open Web page.

If your needs are more elaborate, the longer procedure that follows might be more appropriate. This procedure always requires first selecting the Web pages you want to affect, and then assigning a style sheet to them. Here are the details: