This documentation is archived and is not being maintained.

How to: Create External Cascading Style Sheets (Visual Studio)

An external cascading style sheet (CSS) contains CSS style attributes that can be applied to multiple Web pages. For information about CSS styles, see Cascading Style Sheets Overview.

To add an external style sheet to a Web site project

  1. In Solution Explorer, right-click the name of the Web site project to which you want to add a style sheet, and then click Add New Item.

  2. Under Visual Studio installed templates, click Style Sheet.

  3. In the Name box, type a name for the external style sheet and then click Add.

To add style rules to an external style sheet

  1. On the Styles menu, click Add Style Rule.

    The Add Style Rule dialog box appears.

  2. In the Add Style Rule dialog box, select one of the following CSS selectors and then click OK:

    1. Element   Defines a rule for an element by tag name. For example, you might select the h2 element to define the background color, font family, and link colors for all of the h2 elements on your Web page.

    2. Class name   Defines a rule for a CSS class. For example, you might define a .txtIndent style to indent the text enclosed within all <p class="txtIndent"> tags).

    3. Element ID   Defines a rule for an element with a specific ID. For example, you might define a #txtPop style to reveal and position just one of the div elements on your page.

  3. Find the new style selector and then place the cursor between the braces ( { } ).

  4. On the Styles menu, click Build Style.

  5. In the Style Builder dialog box, define the style attributes that you want the element to have, and then click OK.

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

Selecting a CSS Schema for Validation

The style editor can validate that the style attributes you are creating are valid, and it provides IntelliSense to help you create style attributes as you type. Validation and IntelliSense are controlled by a CSS schema; you can select from several CSS schemas.

To set a CSS schema

  1. On the View menu, click Toolbars, and then click Style Sheet.

  2. On the Style Sheet toolbar, in the Cascading Style Sheet Version for Validation list, click the CSS schema that you want to use for validation and IntelliSense.

After creating the style sheet, you might want to apply it to Web pages. For more information, see How to: Link Cascading Style Sheets to ASP.NET Web Pages (Visual Studio).

See Also