Create and apply a style

A style is a set of formatting characteristics that are defined in a cascading style sheet (CSS). You can apply styles to content in a Web page, including text (individual characters or entire paragraphs), graphics, layers, tables, and even to the body of the entire Web page. Styles enable you to efficiently reuse a set of properties and values without having to set the properties every time you want to use them.

The styles of a CSS cascade in the sense that global style rules apply to HTML elements unless local style rules override them. In general, local style rules take precedence over general style rules. For example, a style defined in an internal CSS in a Web page overrides a style defined in an external CSS. Similarly, an inline CSS defined within a single HTML element on the Web page overrides any styles defined for that same element in the internal or external CSS of the Web page. The portions of global style rules that aren't contradicted by local CSS style rules apply to HTML elements even when local styles are applied.

In this article

Types of styles

Create a style

Apply a style

Types of styles

A style that resides in an external or internal CSS can be class-based, element-based, or id-based. A style is defined by its rule set, which consists of a selector, followed by a block of property declarations that appear between a left curly brace ({) and right curly brace (}). Each type of style is distinguished from the other style types by its selector; a period (.) precedes the selector for a class-based style; a number sign (#) precedes the selector for an id-based style; and the selector for an element-based style consists only of an HTML element, such as the H1 element.

Class-based styles

Use class-based styles to define a set of properties that you want to use on one or more items in a Web page. If you ever want to modify the style, you can edit the style's rule set and every item you've applied the style to will automatically reflect the changes.

In the following example, "introduction" is the style's selector, and "font-size: small" is one property declaration, followed by a second property declaration.

Example of a rule set for a class-based style

.introduction {font-size: small; color: white}

Example of a class-based style applied to a <p> tag

<p class="introduction">

Element-based styles

Use element-based styles to define a set of properties that you want every instance of a particular HTML element to use in a Web page. For example, to create a margin of 25 pixels around all paragraphs (content surrounded by <p> tags) in your Web page, you create an element-based style that uses the p element as its selector and contains declarations for margin properties, as shown in the following code.

Example of a rule set for an element-based style

p { margin-left: 25px; margin-right: 25px }

Id-based styles

Use an id-based style when you want to define a set of properties for a single item or block of items that you want to distinguish from all other content in one or more Web pages. Use an id-based style when you want to style a single HTML element in a Web page.

Example of a rule set for an id-based style

#footer {background-color: #CCCCCC; margin: 15px}

Example of an id-based style applied to a <p> tag

<p id="footer">

Inline styles

Use an inline style when you want to define a set of properties for a single item or block of items in a Web page and don't want to reuse that style. Unlike id-based, element-based, and class-based styles, whose properties are defined in either the head section of a Web page (internal CSS) or in an external CSS file, the properties of an inline styles (or inline CSS) are defined directly in the HTML element you want to use the style.

Example of a rule set for an inline style

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Top of Page

Create a style

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 task pane. 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.

Create a style by using the New Style dialog box

  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    Click New Style in one of these locations: the Apply Styles task pane or Manage Styles task pane, the Style toolbar, or the Format menu.

    • To copy an existing style    Do one of the following:

      • In the Apply Styles task pane, point to the style that you want to copy, click the down arrow that appears, and then select New Style Copy.

      • In the Manage Styles task pane or CSS Properties task pane, 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.

    Note: 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:

Tip: 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.

Note: You can also copy a style from one CSS to another. In the Manage Styles task pane, drag the style from the CSS that contains that style to either the name of the CSS you want to copy it to, or to a particular point in the list of styles in the target CSS.

Create an inline style by using the CSS Properties task pane

  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 task pane, under Applied Rules, either right-click the selector you want to apply the inline style to, or, if "(no rules applied)" appears, right-click anywhere under Applied Rules, and then click New Inline Style on the shortcut menu.

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

Create and apply a new undefined style

You can create styles and apply them to items, and then define the styles later. For example, if you want to work with a designer to create the look of your page, you can apply undefined styles to the items in your page, then sit down with the designer to define the styles later.

  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, on the Style toolbar, in either the Class or ID box, type a unique name for the new style.

Top of Page

Apply a style

You can use the Apply Styles task pane, Manage Styles task pane, or the Style toolbar to apply class-based or id-based styles from your internal and external cascading style sheets (CSS). The Apply Styles task pane enables you to apply multiple styles to a selection, while the Manage Styles task pane and Style toolbar are limited to applying one style. The Style toolbar enables you to quickly name and apply new undefined styles in your page.

You do not need to apply styles that use an element for a selector (element-based styles) because these type of styles are automatically applied to their associated element throughout a Web page. The Apply Styles task pane lists element-based styles under Contextual Selectors, and along with the Manage Styles task pane displays a blue dot next to the style's name. The Style toolbar doesn't list element-based styles.

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

  2. Do one of the following:

    • To apply multiple existing styles    In the Apply Styles task pane, press CTRL while you click each style that you want.

    • To apply a single existing style    Do one of the following:

      • In the Apply Styles task pane, click the class or id style you want.

      • On the Style toolbar, in either the Class or ID drop-down box, click the style you want.

      • In the Manage Styles task pane, right-click the class or id style you want, and then click Apply Style on the shortcut menu.

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

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!

×