Export (0) Print
Expand All

Create a style

You can create inline styles and styles that use class, ID, or element selectors to format a web page and its content. For information about each type of style, see Working with styles.

You can create new styles either from scratch or by copying an existing style. Either way, the New Style dialog box enables you to define everything about your new style, including the selector type, properties, and the style sheet that will contain the style. When you want to create a new inline style, you can also use the CSS Properties panel. When you want to quickly create and apply a new style in your page without setting any properties for the style, you can also use the Style toolbar.

Cc295329.alert_note(en-us,Expression.30).gifNote:

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.

  1. Do one of the following:

    • To add a style to an external CSS, open the .css file.

    • To add a style to an internal CSS, open the web page.

    • To add an inline style, open the web page, and then select the content you want to style.

  2. Do one of the following:

    • To create a new style, in the Apply Styles panel or the Manage Styles panel, on the Style toolbar, or on the Format menu, click New Style Cc295329.286f6ccb-09db-4cdc-90ec-b7cb537b4121(en-us,Expression.30).png.

    • To copy an existing style in the Apply Styles, Manage Styles or CSS Properties panel, right-click the style that you want to copy, and then select New Style Copy.

  3. In the New Style dialog box, do the following:

    Use this

    To do this

    Selector

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

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

      Cc295329.alert_note(en-us,Expression.30).gifNote:
      Class and ID selector names can't contain spaces unless you're creating a complex selector.
    • To use an element selector, either type the name of an HTML element or click the Selector drop-down box and select an element name.

    • To use an inline selector, select inline style.

    • To create a complex selector, type the selector.

    Define in

    Select one of the following:

    • Current page adds the new style to the internal CSS in the current web page.

    • New style sheet adds the new style to a new blank external CSS.

    • Existing style sheet adds the new style to an existing external CSS that you specify.

    Apply new style to document selection

    Apply the style to the current selection in the current web page.

    URL

    If you selected Existing style sheet in Define in, enter the URL to the .css file.

    Category

    Select any of the following, and then set the properties that appear to the right in the dialog box:

    Cc295329.alert_tip(en-us,Expression.30).gifTip:
    Categories that appear in bold in the Category list contain set properties.
    • 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.

  1. In Design view or Code view, in your web page, select the content you want to add an inline style to.

  2. In the CSS Properties panel, under Applied Rules, either right-click the selector you want to apply the inline style to or if "(no rules applied)" appears then right-click anywhere under Applied Rules, and in the shortcut menu, click New Inline Style.

  3. Under CSS Properties, set the properties you want.

  1. In Design view or Code view, in your web page, select the item you want to apply a style to.

  2. To create and apply a new style without defining any properties, in the Style toolbar, in either the Class or ID box, type a unique name for the new style.

Community Additions

ADD
Show:
© 2014 Microsoft