This documentation is archived and is not being maintained.

Style Builder Dialog Box 

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 all at one 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 dialog box 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 one time.

To display the Style Builder dialog box
  1. Click Format on the main menu and then click Style.

    The Style Builder dialog box appears.

  2. Select an option from the left pane to define CSS style attributes.

Creating Inline CSS Styles in Design View

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.

To apply CSS style attributes directly to HTML elements on the Web page
  1. Open the HTML document in Design view of the HTML Designer.

  2. Open the Document Outline window, select an element you want to format, and then click Style on the Format menu to open the Style Builder dialog box.

  3. Select an option from the left pane to define CSS style attributes.

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> element of your HTML document.

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, as shown in the following code example.

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

Alternatively, you can create a STYLE block within the <HEAD> element 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 that has a .css extension.

To create styles in a separate style sheet document that has a .css extension
  1. Open an external style sheet (.css document) for editing, or create one if you do not have one in the Web application by following these steps:

    1. Right-click the Web site and then click Add New Item.

    2. From the Visual Studio Installed Templates list in the Add New Item dialog box, select style sheet and then click Add to add a new style sheet to your Web site.

    3. Double-click the style sheet to open it for editing.

  2. Click Add Style Rule from the Styles menu to insert a new, blank style definition.

  3. Place the insertion point within the curly braces ({ }) that follow the selector for the style rule, click Styles, and then click Build Style on the Styles menu to open the Style Builder dialog box and add attributes to the style definition.

NoteNote

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 insertion point 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 style sheet within the <HEAD> element on the page, as shown in the following code example.

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

Applying Style Definitions to Elements by CLASS and ID

Start a style definition with a period to define a style CLASS property, as shown in the following code example.

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

You can apply a defined style CLASS property to an element on the 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 drop-down 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 9 pt 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 number sign (#), as shown in the following code example.

#bigdeal {font-decoration:underline; font-size:24pt; color:red;}
To apply a unique style to one element on the Web page
  1. Open the page in the HTML view of the HTML Designer.

  2. Use the Document Outline window to select the element, and then open the Properties window

  3. 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>
  1. Using the previous definition for the "term" style, the words "Happy Birthday" will be displayed in a 24 pt font, underlined, and red.

Tasks

UI Elements

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 (UI), tables, and visual effects

Other, Style Builder Dialog Box

See Also

Show: