Style Builder Dialog Box

Article
10/12/2006

The Style Builder dialog box provides options that make it possible for you to define cascading style sheet (CSS) style attributes. A CSS style combines individual formatting and positioning attributes into an attribute set that you can apply at the same time.

The Style Builder dialog box is divided into two panes. The left pane lists eight general categories (Font, Background, Text, Position, Layout, Edges, Lists, and Other). When you select a category, the right pane shows the options for the selected category. As you select style options, the Style Builder creates CSS style definitions for you.

You can apply the CSS style attributes directly to individual HTML elements on a single Web page, or you can add style attributes to CSS style rules stored on external style sheets. External style sheets can be used to define a common appearance for many Web pages at once.

Creating Inline CSS Styles in Design View

To apply CSS style attributes directly to HTML elements on your Web page, open the HTML document in Design view of the HTML Designer. Use the Document Outline window to select an element you wish to format, and then choose Build Style from the Format menu to open the Style Builder dialog box. The title of the Style Builder dialog box will include the name of the element selected. CSS styles can be applied to elements within the <BODY> of your HTML document.

Note On the Format menu, the Build Style option becomes available when you open an HTML document in Design view and set its targetSchema property to a Web browser that supports HTML 4.0 or later and CSS styles.

When you format an HTML element selected in Design view, style attributes are inserted inline into the markup for the element. Switch to HTML view to view and adjust the new style attributes inserted.

CSS Style Markup in HTML View

When you add an inline style to an HTML element in Design view, you add HTML markup to its opening tag that you can then view and edit in HTML view. For example:

<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>

Alternatively, you can create a STYLE block within the <HEAD> portion of your HTML document. For example:

<STYLE TYPE="text/css">

BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}

A:link {color:blue;text-decoration:none}

A:active {color:red;text-decoration:none}

A:visited {color:blue;text-decoration:none}

.term { font-size:9pt; font-weight:bold; color:darkblue;}

</STYLE>

CSS Styles in External Style Sheets

You also can create styles in a separate style sheet document with a .css extension. Open a .css document for editing, and choose Add Style Rule from the Styles menu to insert a new, blank style definition. Place the cursor within the curly braces { } that follow the selector for the style rule, and choose Build Style to open the Style Builder dialog box and add attributes to the style definition.

Note The Styles menu, whose options include Add Style Rule and Build Style, appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you place the cursor within the curly braces ( { } ) that follow the selector for a style rule.

To make the styles defined on an external style sheet available to the HTML elements on a Web page, create a link to an external stylesheet within the <HEAD> portion of the page, as follows

<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">

Applying Style Definitions to Elements by CLASS and ID

Begin a style definition with a period to define a style CLASS.

.term { font-size:9pt; font-weight:bold; color:darkblue;}

You can apply a defined style CLASS to an element on your web Page from either Design or HTML view of the HTML Designer. In Design view, you can select text or elements in the WYSIWYG editor, or use the Document Outline window to select elements. Select a style from the Style dropdown menu in the Format toolbar, and it is applied to the selected element.

In HTML view, you can use the Document Outline window to select the element, open the Properties window, scroll down to the CLASS property of the selected element, and enter the selector for the desired CSS style (without the period). This will insert a CLASS property into the HTML markup for the element. For example:

<DIV CLASS="term">World Wide Web</DIV>

Using the previous definition for the "term" style, the words "World Wide Web" will be displayed in a 9pt font, bolded, and dark blue.

Unique styles also can be defined for use at just one location on a page. Begin the name of a unique style with a pound (#) sign.

#bigdeal {font-decoration:underline; font-size:24pt; color:red;}

To apply a unique style to one element on your web Page, open the page in HTML view of the HTML Designer. Use the Document Outline window to select the element, and then open the Properties window. For the ID property of this element, enter the selector for the desired style. This will insert an ID attribute into the markup for the element. For example

<P ID="bigdeal">Happy Birthday</P>

Using the previous definition for the "term" style, the words "Happy Birthday" will be displayed in a 24pt font, underlined, and red.

To learn more about options for	See
Fonts	Font, Style Builder Dialog Box
Backgrounds	Background, Style Builder Dialog Box
Text	Text, Style Builder Dialog Box
Position of elements on a page	Position, Style Builder Dialog Box
Flow control, overflow, clipping, and printing page breaks	Layout, Style Builder Dialog Box
Borders, margins, and padding	Edges, Style Builder Dialog Box
Lists	Lists, Style Builder Dialog Box
The user interface, tables, and visual effects	Other, Style Builder Dialog Box

Style Builder Dialog Box

Creating Inline CSS Styles in Design View

CSS Style Markup in HTML View

CSS Styles in External Style Sheets

Applying Style Definitions to Elements by CLASS and ID

See Also

Additional resources