Editing style sheets

Show Me

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

Create a style sheet.

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

  1. Open the .css file that you want to edit by double-clicking the file in the Enterprise Explorer view. The style sheet opens in the editing area.

  2. To edit a style, select the style in the Preview pane and click the

    Edit selected rule icon. If you wish to edit the source version of the file, you can type style definitions in the Source pane.

    Tip: You can also edit a style on an open Web page by right-clicking the element in the Design page of Page Designer and selecting

    Style | Edit Style Rule.

  3. In the Set Style Properties dialog box, you can set styles related to fonts, background effects, layout position, list formats, and so on. Click OK . 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.

    You can toggle between showing or hiding the panes by selecting

    Panes | Maximize source or

    Panes | Maximize preview,

  4. 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 Edit Style dialog box, select the element whose style you want to edit and click OK.

    Note: If there are no exiting styles of HTML tags, select New or New Style Rule instead. You can also edit styles from the pop-up menus of CSS Designer, or the pop-up menu of Page Designer in the Design page.

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

    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 Enterprise 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.

 

Related concepts

Cascading Style Sheet (CSS) Designer

 

Related tasks

Previewing styles for a Web page

Applying style sheets to Web pages

Applying sample style sheets to Web pages from the Gallery