Editing style sheets

You can control the look and feel of your Web pages with style sheets.

To edit an external style sheet that your page links to, do the following:

1. Open the .css file that you want to edit. If you already have a Web page open in Page Designer, you can open the style sheet from the Styles view. The Styles view shows the style sheet that your page links to. To open it, double-click it, or click the Edit selected rule toolbar button.

2. The style sheet will open in the editing area. If you wish to edit the source version of the file, you can type style definitions in the Source pane. In addition, content assist is available by typing Ctrl+Space. As you make style definition updates, style changes are immediately applied to the Design page version of your Web page. You can also see updated styles in the CSS Designer Preview pane.

   Note: By selecting Panes > Maximize source or Panes > Maximize preview, you can toggle between showing or hiding each of these panes.

   You can see how the updated styles will look in a Web browser using the Preview pane. Just drag and drop an HTML file from the Project Explorer view to the Preview pane, and the style effects are displayed without actually having to open the HTML file. You can also specify an HTML file using the Browse button or the Preview with list at the top of the preview pane.

3. To edit individual tag-attribute pairs, you can select them in the Styles view, and then select Edit from the pop-up menu or the Edit selected rule toolbar button. In the Set Style Properties dialog box, you can set styles related to fonts, background effects, layout position, list formats, and so on.

4. Click OK to save updates and apply styles to the current page.