Working with Style Sheet Code | Microsoft Expression Web For Dummies

When you get the hang of style rule syntax, you may start to feel at home in Code view (or at least feel less like an awkward guest). In fact, if you've ever written style sheets, you can create a blank CSS file, write your own style rules, and attach the file to your Web pages. As long as the style rule syntax is correct (and Expression Web lets you know if it's not), it doesn't matter if you write your style rules manually or use the New Styles dialog box.

Expression Web lets you decide how to format your CSS and provides code shortcuts to simplify writing correctly formatted style rules.

Changing style rule formatting

Although Web browsers couldn't care less about how a style sheet looks (as long as the code is valid), a little bit of white space makes it much easier for human eyes and brains to decipher.

Expression Web writes style rules with each property on a separate line. Use the options on the Code Formatting tab in the Page Editor Options dialog box to change the way style rules are formatted, as shown in Figure 9-5 (choose Tools Page Editor Options and then click the Code Formatting tab).

image from book
Figure 9-5: The CSS area on the Code Formatting tab.

In the CSS list, select the part of the style rule you want to change, and in the Formatting section, choose a line break and the number of spaces after it. Also, choose whether to indent style properties and use shorthand properties in generated styles. Not all choices are available for all style rule parts.

Changing style rule defaults

You can change the way Expression Web writes style rules as you format your page elements. You change these options by tinkering with the settings on the CSS tab in the Page Editor Options dialog box, as shown in Figure 9-6 (choose Tools Page Editor Options and then click the CSS tab).

image from book
Figure 9-6: The CSS tab in the Page Editor Options dialog box.

The options in this dialog box tell Expression Web how to write style rules when you format your page's content. If you already used CSS and you're picky about how style rules get written, you may want to tinker with these settings to match the way you prefer to work.

If you're new to using styles for Web page formatting, the Expression Web default style rule settings are probably fine for you. As you get more comfortable working with styles, you can experiment with changing these settings. We talk about changing a few of these options in Chapter 8.

Using CSS IntelliSense

CSS IntelliSense combines code autocompletion and syntax checking. IntelliSense pops up to help when you're writing CSS style rules, either inside a Web page's code or in an external style sheet. The CSS Properties task pane also uses IntelliSense for entering or editing property values. Figure 9-7 shows the pop-up list of CSS properties that appears when you're writing a style rule in Code view.

image from book
Figure 9-7: IntelliSense for CSS style rules.

Some tips for working with CSS IntelliSense:

To scroll through a pop-up menu of properties, use the up-and down-arrow keys or the PgUp and PgDn keys to scroll a block at a time. Or type the beginning letters of the property to jump to that property.
To insert a property from the IntelliSense pop-up menu, double-click the property or select it and press the Tab or Enter key.
The Value icon indicates a predefined property value. Click to insert the value.
Click the Pick icon to select or enter a custom value (such as a color value).

The Microsoft Expression Web Help system contains more information about IntelliSense. To get help, press F1.

Adding comments to external style sheets

Use comments to add explanatory text and reminders to your external style sheets. Comments in style sheets are particularly useful for explaining what different groups of style rules are used for. Figure 9-8 shows a style sheet file with comments. CSS comments have a different syntax than HTML comments do. (We show you HTML comments in Chapter 14.)

image from book
Figure 9-8: Comments in a CSS style sheet.

To insert a comment, follow these steps:

Open the CSS style sheet file.
Click in the style sheet where you want to insert the comment.

To create a new, blank line, place your cursor at the end of a style rule's curly bracket (}) and press Enter.
Type /* and then press the spacebar once to insert a space.
Type the comment, press the spacebar once, and type */ to end the comment.
Save the style sheet by clicking the Save button on the Common or Standard toolbar.

To delete a comment, select the comment along with its opening and closing characters (/* comment */) and press the Delete key.

Tip

Comments are useful tools for troubleshooting CSS styles. You can comment-out a style rule, which allows you to see what effect removing it has on your Web page's formatting without actually deleting it from the style sheet. Here's what a commented-out CSS style rule looks like:

 /* p {           font-size: large;           color: #008000; } */