Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Building CSS Styles

Visual Studio .NET 2003

A CSS style rule in an external CSS style sheet can position and format text and other elements on your Web pages. The CSS style rules that you build can be included in an HTML document or listed on an external style sheet that is linked to your HTML document.

To prepare to build new CSS styles in an external CSS style sheet

  1. Open an HTML document in the HTML Designer.

    Do not select any element on the page.

  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. In HTML Designer, switch to HTML view.
  5. In the <HEAD> section of your HTML document, add a <LINK> to your external CSS style sheet. Use the following format:
    <LINK REL="stylesheet" TYPE="text/css" HREF="MyStyles.css">
    

To add style rules to an external CSS style sheet

You can type CSS style rules directly onto a CSS style sheet, or use the Add Style Rule and Style Builder dialog boxes to build them.

  1. Open the external CSS style sheet named in your <LINK> for editing.
  2. On the Styles menu, choose Add Style Rule.

    The Add Style Rule dialog box appears.

  3. Choose a type of CSS style selector:
    1. Select an Element (for example, choose the BODY element to define a default background, a font-family, or link colors for your page).
    2. Enter a Class name (this defines a style that can be used to format multiple elements on your page).
    3. Enter an Element ID (this defined a style used to format just one element on your page).
  4. Click OK.

    The new style selector is inserted, followed by braces ( { } ). Place the cursor between the braces.

  5. Choose Build Style from the Styles menu.

    The Style Builder dialog box appears.

  6. Add CSS attribute:value pairs to the style definition.

    The Style Builder inserts CSS style attributes within the braces ( { } ) of your style.

To enter a style for the BODY element manually in an external CSS style sheet

  1. Type the selector BODY, and then press ENTER.
  2. Type an opening brace ( { ), and then press ENTER again.

    A list of available attributes for the BODY element is displayed.

    Note   Statement completion pop-ups appear if you have selected the Show statement completion popups check box on the CSS Specific page of Options.
  3. Select an attribute, and then type a colon ( : ).

    A list of valid values for the attribute is displayed.

  4. Select a value, type a semicolon ( ; ), and then press the spacebar.
  5. Continue to add attributes and values until the style is defined.
  6. Add a closing brace ( } ), and press ENTER.
  7. If you want, you can then select Format Style Sheet from the Styles menu to format the new style rule.
    Note   The format of style rules is determined by settings on the Format page of CSS Options within the Options dialog box.

To enter a CSS style CLASS manually in an external CSS style sheet

  1. Type a period and the selector for the new style class (for example .txtBody), and then press ENTER.
    Note   It is useful to establish a naming convention for categories of styles. For example, you might name styles for text .txtIntro, .txtBody, .txtNote, and so on.
  2. Type an opening brace ( { ), and then press ENTER.

    A list of available CSS attributes is displayed.

  3. Select an attribute, and then type a colon ( : ).

    A list of valid values for the attribute is displayed.

  4. Select a value, type a semicolon ( ; ), and press the spacebar.
  5. Continue to add attributes and values until the style is defined.
  6. Add a closing brace ( } ), and press ENTER.
  7. If you want, select Format Style Sheet from the Styles menu to format the new style rule.

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

  1. From the Styles menu, select Add Style Rule.

    The Add Style Rule dialog box appears.

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

    The element name appears on the style sheet as the selector for a new style, followed by opening ( { ) and closing ( } ) braces.

  4. Place the cursor between the braces, and select Build Style from the Styles menu.

    The Style Builder dialog box appears.

  5. 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 element style definition in the CSS Style Sheet. This rule formats all instances of the HTML element in pages that LINK to this style sheet.

To apply a CSS style CLASS to an HTML element selected on your Web page

  1. Open your Web page in the HTML designer.
  2. Select the desired HTML element.

    To reveal and select concealed elements, choose Show Details in the Design View toolbar, or open the Document Outline window, and select elements there.

    To format text using a CSS style, first enclose the text in a <SPAN> or <DIV> element, and then select the newly inserted element.

  3. On the Styles menu on the Format toolbar, select the desired CSS style.

    A CLASS attribute is added to the opening tag of the selected element whose value is the selector for a CSS style:

    <DIV CLASS="textFancy">This is the selected text.</DIV>

    Only HTML elements that support inline styles can include a CSS style CLASS or ID attribute. The attributes of a CSS style cascade onto any other elements it encloses, and, as applicable and not superseded by the styles of those enclosed elements, apply to their content as well. For more information, see Adding CSS Style Attributes in Design View.

See Also

Working With CSS Styles | Introduction to Cascading Style Sheets | Creating an External CSS Style Sheet | Inserting CSS Styles from the Document Styles Window | Applying a CSS Style to Another Web Page | Linking a Web Page to a CSS Style Sheet

Show:
© 2015 Microsoft