Creating an External CSS Style Sheet

  • Article

An external CSS style sheet contains CSS style rules that can be applied to HTML elements on Web pages. A CSS style definition can combine individual formatting and positioning attributes into an attribute set applied all at once. You can assign a CSS style class to specific HTML elements (for example, an individual <DIV> element), or to all elements of a certain kind (for example, <BODY> or <H1>).

Note   To use styles from an external CSS style sheet to format elements on a Web page, you must include a LINK to the style sheet within the <HEAD> section of the page. The external style sheet document must be included in the project to be deployed with the Web page it formats.

To add an external CSS style sheet to a Web project

  1. In Solution Explorer, select the Web project.

  2. On the Project menu, choose Add New Item.

    The Add New Item dialog box appears.

  3. Choose Web Project Items in the left pane, and select the Style Sheet icon in the right pane.

  4. Type a name for your new style sheet in the Name field, and then choose Open.

    The new CSS style sheet appears, ready for editing.

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. On the Styles menu, choose Add Style Rule.

    The Add Style Rule dialog box appears.

  2. Choose a type of CSS style selector.

    1. An Element (for example, you might choose the BODY element to define the background color, font-family, and link colors for your page).
    2. A style CLASS (for example, you might define a .txtIndent style that could be used to indent the text enclosed within many <P CLASS="txtIndent"> elements).
    3. An Element ID (for example, you might define a #txtPop style that would be used to reveal and position just one <DIV> on your page).

  3. Click OK.

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

  4. On the Styles menu, choose Build Style.

    The Style Builder dialog box appears.

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

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

To add an external CSS style sheet to the Solution Items list

You also can add a CSS style sheet to a Solution folder without adding it to a specific Web project.

Note   An external style sheet must eventually be included in a Web project to be deployed with Web pages in the project that it formats.

  1. In Solution Explorer, select the desired solution.

  2. On the Project menu, choose Add New Item.

    The Add New Item dialog box appears.

  3. Choose Web Project Items in the left pane, and select the Style Sheet icon in the right pane.

  4. Type a name in the Name field, and click Open.

    In Solution Explorer, a new CSS Style Sheet document is listed among the Solution Items. This new style sheet then opens in the CSS editor ready for you to add CSS style definitions.

See Also

Working With CSS Styles | Setting the targetSchema Property of an HTML Document | Linking a Web Page to a CSS Style Sheet | Introduction to Cascading Style Sheets | Building CSS Styles | CSS Editor