Modify a style

When you want to edit the properties of a style in an external, inline, or internal cascading style sheet (CSS), you can start with either the CSS Properties task pane or the Apply Styles task pane. The Apply Styles task pane enables you to edit any style contained in the style sheets of the current Web page, even styles that the Web page doesn't use. The CSS Properties task pane enables you to edit only styles that the current Web page uses, styles that you can select in Code view, or any style in an open external .css file.

Note: If you want to rename a class-based style and simultaneously update all references to that style, use the Rename class command in the Apply Styles, Manage Styles, or CSS Properties task panes. If you rename a class-based style by using the Modify Style dialog box instead, references to that style aren't updated for you. Whichever method you use to rename id-based styles or change the selector type of any type of style, references to that style aren't updated; you must update them yourself.

What do you want to do?

Rename a class-based style

Modify a style by using the CSS Properties task pane

Modify a style by using the Modify Style dialog box

Rename a class-based style

  1. Open a Web page that contains the CSS that contains the class-based style you want to modify.

  2. Do one of the following:

    • In the Apply Styles task pane, point to the class-based style, click the down arrow, and then click Rename class.

    • In either the Manage Styles task pane or CSS Properties task pane, right-click the class-based style, and then click Rename class.

  3. In the Rename Class dialog box, in the New Name box, enter a new name for the class. You don't need to type a period (.) before the new class name.

  4. To update the class name in all existing references to the class, click Rename class references in (#) files that use this style sheet.

  5. Click OK.

Top of Page

Modify a style by using the CSS Properties task pane

  1. Open a Web page that uses the style that you want to modify.

  2. In the CSS Properties task pane, if the style that you want to modify doesn't appear in the Applied Rules list, put your cursor in content or select content that uses the style that you want to modify.

  3. In the Applied Rules list, click the name of the style that you want to modify.

  4. In the CSS Properties section of the CSS Properties task pane, set the properties you want.

Top of Page

Modify a style by using the Modify Style dialog box

  1. Open any Web page that contains the CSS that contains the style that you want to modify.

  2. Do one of the following:

    • To modify a class-based, element-based, or id-based style, point to the style in the Apply Styles task pane, click the down arrow, and then click Modify Style.

    • To modify an inline style, put your cursor in content or select content that uses the style, point to the style in the Apply Styles task pane, click the down arrow, and then click Modify Style.

    • In the Applied Rules list in the CSS Properties task pane, right-click the style, and then click Modify Style. If the style that you want to modify doesn't appear in the Applied Rules list in the task pane, put your cursor in content or select content that uses the style that you want to modify.

  3. To change the style's name and selector type, in the Selector box of the Modify Style dialog box, do one of the following:

    Note: Class and id selector names can't contain spaces unless you're creating a complex selector.

    • To use an element selector, click an element name on the Selector drop-down box.

    • To use an id selector, type a number sign (#) followed by a unique name.

    • To use an inline selector, click inline style on the Selector box menu.

    • To use a class selector, type a period (.) followed by a unique name.

      Note: To rename an existing class-based style and automatically update any existing references to that style, use the procedure in the earlier section Rename a class-based style.

  4. In the Category box, click one of the following and set the properties you want to format:

    • Font sets font properties, including size, weight, decoration and color.

    • Block sets line-height, text alignment, text indentation, and text spacing.

    • Background sets background color and background image properties.

    • Border sets a border and its properties.

    • Box sets the padding and margin properties of box and block-level elements.

    • Position sets the dimensions and position of box and block-level elements.

    • Layout sets the visibility, floating and wrapping behavior, clipping and other layout properties of box and block-level elements.

    • List sets the properties of list elements, including type, position, and image.

    • Table sets the properties of table-related elements, including spacing, layout, border properties.

  5. Click OK.

Top of Page

Share Facebook Facebook Twitter Twitter Email Email

Was this information helpful?

Great! Any other feedback?

How can we improve it?

Thank you for your feedback!

×