Remove a style from content

  • Article

When you want to remove a class selector, ID selector, or inline style from content that uses that styles, the Apply Styles task pane enables you to remove either a single instance or all instances of the style in the current web page. You can also use the Style toolbar to remove a class or ID selector from content. Removing a style from content in a web page removes only the reference to the style in your web page and doesn't remove the style from the external or internal CSS; you can continue to apply the same style to other content.

Because element selectors are automatically applied to associated HTML elements, you can't remove element selectors from particular content in a web page. The Apply Styles task pane lists element selectors under the heading Contextual Selectors and labels them with a blue dot Cc295506.69a199aa-4b7a-4713-ba75-2837bdcfa759(en-us,Expression.10).gif. If you want to stop using an element selector throughout an entire web page, you can remove the style from the CSS. If you want to stop using only some instances of an element selector but not all of them, you can design a new class or ID selector that overrides the element selector.

Tip

To help you identify styles that are in use, the Apply Styles task pane displays a circle Cc295506.539c7c1e-1c2d-438b-9400-0c3782606e19(en-us,Expression.10).gif around the colored dot Cc295506.93ed2242-d3a9-4228-8e01-b114ce38a04c(en-us,Expression.10).gif next to styles used in the current web page. When you put the cursor in content or select content, the Apply Styles task pane displays a solid rectangular border around every style that the content uses.

To remove one instance of a style from a web page

  1. In Design view or Code view, in your web page, put your cursor in or select the content that you want to remove the style from.

  2. Do one of the following.

    • To remove a class selector, ID selector, or inline style, in the Apply Styles task pane, point to the style that you want to remove, click the down arrow, and according to the type of selector (class, ID, or inline), select Remove Class, Remove ID, or Remove Inline Style.

    • To remove either a class selector or an ID selector, in the Style toolbar, in the Class or ID box, clear the style name.

To remove all instances of a style from a web page

  1. With your web page open, do one of the following.

    • In the Apply Styles task pane, point to the style that you want to remove, click the down arrow, and then select Select All Instance(s).

    • In the Manage Styles task pane, right-click the style that you want to remove, and in the shortcut menu, click Select All Instance(s).

  2. In the Apply Styles task pane, point to the style again, click the down arrow, and according to the type of selector (class, ID, or inline), select Remove Class, Remove ID, or Remove Inline Style.

To remove all class and inline selectors from a selection

  1. In Design view or Code view, in your web page, put your cursor in or select the content that you want to remove the styles from.

  2. In the Apply Styles task pane, under Select CSS style to apply, click Clear Styles.

    Tip

    To remove all styles and HTML formatting from a selection, on the Format menu, click Remove Formatting.

See also

Concepts

Delete a style from a cascading style sheet

Attach or detach an external cascading style sheet

Apply Styles task pane