Modify a style

  • Article

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 panel or the Apply Styles panel. The Apply Styles panel 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 panel 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 a CSS property is not supported by the CSS schema that is selected in the Authoring tab of the Page Editor Options dialog box, the list of values for that property appears blank in the New Style and Modify Style dialog boxes and the property is not listed in the CSS Properties panel. For more information, see Set IntelliSense options for CSS.

To rename a class selector

  1. Open a web page that contains the CSS that contains the class selector you want to modify.

  2. Do one of the following:

    • In the Apply Styles panel, point to the class selector, click the down arrow, and then click Rename class.

    • In either the Manage Styles panel or CSS Properties panel, right-click the class selector, and click Rename class.

  3. In the Rename Class dialog box, in the New Name box, enter a new name for the class selector. 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.

To modify a style by using the CSS Properties panel

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

  2. In the CSS Properties panel, 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 panel, set the properties you want.

To 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, element, or ID selector, point to the style in the Apply Styles panel, click on 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 panel, click on the down arrow, and then click Modify Style.

    • In the Applied Rules list in the CSS Properties panel, right-click the style, and select Modify Style. If the style that you want to modify doesn't appear in the Applied Rules list in the panel, 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 selector and automatically update any existing references to that style, use the procedure To rename a class selector. If you rename an ID or element selector, or change the selector type of any type of style, references to that style aren't updated automatically; you must update them manually.

  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.

See also

Tasks

Create a style
Delete a style from a cascading style sheet
Remove a style from content

Reference

CSS Properties panel

Concepts

Using cascading style sheet tools
Cascading style sheet reference

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.