Adding CSS Style Attributes in Design View

Article
10/12/2006

As you edit a Web page in Design view of the HTML Designer, you can add CSS style attributes to the <BODY> element or to any selected HTML element within the <BODY> that accepts CSS attributes.

Tip To reveal and select hidden elements, click the Show Details icon in the Design View toolbar, or open the Document Outline window, and select elements there.

To add CSS style attributes to an HTML element

Open the HTML document in Design view.
Select the HTML element that you want to format, and then choose Style Builder on the Format menu.

Note The Style Builder option becomes available on the Format menu when the targetSchema property of your Web page is set to a Web browser that supports HTML 4.0 or later.
On the Format menu, choose Build Style.

The Style Builder dialog box appears.
Enter values for the desired CSS attributes in the Style Builder dialog box.

CSS attribute:value pairs are added to a style="" declaration inserted into the opening tag of the selected HTML element. For example,
```
<H3 style="text-decoration:underline; color:red;">IMPORTANT</H3>
```
Note When you apply an inline CSS style to one HTML element, you have not changed the style for all such elements. In the preceding example, the added CSS style attributes apply to just one H3 element. Other H3 subheads will continue to display in the default H3 style.

To apply an existing CSS style CLASS to a selected HTML element

Open your Web page in the HTML Designer.
Select the HTML element to be formatted.
Select a style from the CSS style drop-down menu on the main toolbar.

- or -

In the Properties window for the selected element, scroll down to the CLASS property, and enter the selector for a CSS style CLASS.

Either procedure adds a CLASS attribute to the opening tag of the selected element whose value is the selector for the desired style:
```
<DIV CLASS="txtFancy">
```

To apply a unique CSS style ID to a selected HTML element

Open your Web page in the HTML Designer.
Select the HTML element to be formatted.
Open the Properties window for the selected element.
As the value for the ID property, enter the selector for the desired unique CSS style.

This adds an ID attribute to the opening tag of the selected element whose value is the selector for the desired style:
```
<DIV ID="txtBanner">
```

To apply a CSS style CLASS to selected text

Open the HTML document for editing in the HTML Designer.
If new styles are needed, select Document Styles on the Format menu, and create them.

The Document Styles window opens. The <HEAD> section of your document can include both CSS styles within a <STYLE> block and links to external CSS style sheets. For more information, see Inserting CSS Styles from the Document Styles Window.
Enclose the text you want to format in a <DIV> or <SPAN> element.

For further information, see Creating DIV and SPAN Elements.
Select the <DIV> or <SPAN> element just inserted.

Click the Show Details icon in the Design View toolbar to reveal the opening and closing tags of <SPAN> and <DIV> elements, or open the Document Outline window and select these elements there.
From the Styles drop-down menu on the Formatting toolbar, select the desired CSS style.

A CLASS attribute is added to the opening tag of the selected <SPAN> or <DIV> element. For example:
```
<SPAN CLASS="txtFancy">Hello world</SPAN>
```
In this example, "txtFancy" is the name of a CSS style class:

.txtFancy {font-size:13pt; font-weight:bold; font-style:italic; color:maroon;)

The CSS attributes defined for the selected CSS style CLASS are applied to the text contained within the opening <SPAN> and closing </SPAN> tags. In the preceding example, the words Hello world are displayed in the same font as the surrounding text, but sized to 13 point and made bold, italic, and maroon.

Adding CSS Style Attributes in Design View

See Also

Additional resources