Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Inserting CSS Styles from the Document Styles Window

Visual Studio .NET 2003

The Document Styles window is designed to help you apply styles to elements in an HTML document. You can insert styles and style blocks into the current HTML document, add style definitions to external style sheets, and create links to existing style sheets. To open the Document Styles window, open an HTML document in Design View of the HTML Designer, and then choose Document Styles from the Format menu.

Note   The Document Styles option becomes available on the Format menu 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. CSS styles cannot be used with older browsers, because HTML 3.2 did not support CSS styles.

To prepare your Web page to use CSS styles

  1. Open an HTML document for editing in the HTML Designer.
  2. On the View menu, choose Property Pages.

    The DOCUMENT Property Pages window appears.

  3. From the Target Schema drop-down list, select a Web browser that supports HTML 4.0 or later.
  4. Within the <HEAD> section of your HTML document, add a LINK to your external CSS style sheet that follows this form:
    <LINK REL="stylesheet" TYPE="text/css" HREF="MyStyles.css">
    
  5. Add a <STYLE> block within the <HEAD> section of your Web page.

To add a <STYLE> block to an HTML document

  1. Open a Web page for editing in Design view.
  2. On the Format menu, choose Document Styles.

    The current document appears at the top of the Document Styles window.

  3. Choose the Add Style Sheet icon at the top of the window.

    A collapsed <STYLE> node appears in the Document Styles window. In the HTML markup for the page, <STYLE></STYLE> tags are inserted into the <HEAD> section of the document.

To add a CSS style rule for a CLASS of elements within a <STYLE> block

  1. Open a Web page for editing in HTML view.
  2. Select an HTML element in the <BODY> of the page to format.
  3. In the Properties window, assign this element a CLASS name.
  4. On the Format menu, select Document Styles.

    The Document Styles window appears.

  5. If there is not yet a <STYLE></STYLE> block in the <HEAD> section of the page, insert one.
  6. In the Document Styles window, expand the <STYLE> node. Select CLASSES, and then choose Add Style Rule.

    The Add Style Rule dialog box appears.

  7. Select Class Name, and enter the same CLASS name assigned to the HTML element.

    A new CLASS node appears under the <STYLE> node in the Document Styles window.

    Note   In the <HEAD> section of the page, the selector for this CLASS will begin with a period ( . ) character (for example, .txtNote). You need not enter this period as you create the class.
  8. Select this new CLASS node in the Document Styles window, and then click the Build Style icon at the top of the Document Styles window.

    The Style Builder dialog box appears.

  9. Enter values for the desired CSS attributes in the Style Builder.

    CSS attribute:value pairs are added within the opening ( { ) and closing ( } ) braces of the CSS style rule for the CLASS assigned to the selected HTML element.

To add a CSS style rule for a single HTML element within a <STYLE> block

  1. Open a Web page for editing in HTML Designer.
  2. Select an HTML element in the <BODY> of the page to format.
  3. In the Properties window, assign this element an ID name (for example, txtFancy).
  4. In HTML view, place the cursor within the <STYLE></STYLE> block in the <HEAD> section of the page.
  5. Type a pound ( # ) sign and the selector for the new CSS style ID (for example, #txtFancy), followed by a space and opening ( { ) and closing ( } ) braces.
  6. Switch to Design view.
  7. On the Format menu, select Document Styles.

    The Document Styles window appears.

  8. In the Document Styles window, expand the <STYLE> node.
  9. Expand ELEMENT IDs, and select the ID that was just added (for example, txtFancy).
  10. Click the Build Style icon at the top of the Document Styles window.

    The Style Builder dialog box appears.

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

    CSS attribute:value pairs are added within the opening ( { ) and closing ( } ) braces of the CSS style rule for the unique element ID.

To add a CSS style rule for all instances of an HTML element

  1. Open a Web page or its external CSS style sheet for editing in HTML Designer.
  2. On the Format menu, select Document Styles.

    The Document Styles window appears.

  3. In the Document Styles window, expand the <STYLE> node. Select ELEMENTS, and click the Add Style Rule icon.

    The Add Style Rule dialog box appears.

  4. Select an element from the Element list.
  5. Click the Add arrow (), and then click OK.

    The element appears under the Elements folder.

  6. Select the element just added, and click the Build Style icon at the top of the Document Styles window.

    The Style Builder dialog box appears.

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

    A CSS style rule is added to the <STYLE></STYLE> block in the <HEAD> section of the page or to its external CSS style sheet. This rule will format all instances on the page of the HTML element named in the style selector.

See Also

Document Styles Window | Working With CSS Styles | Introduction to Cascading Style Sheets | Building CSS Styles | Adding CSS Style Attributes in Design View | Applying a CSS Style to Another Web Page | Linking a Web Page to a CSS Style Sheet | CSS Editor

Show:
© 2014 Microsoft. All rights reserved.