Share via

Visual InterDev

  • Article

Cascading style sheets (CSS) give you the ability to define a set of styles that overrides the browser's standard methods for rendering HTML. This lets you give your pages a unique and consistent design. For an in-depth discussion on using style sheets with Microsoft® Visual InterDev™, see Site Consistency.

You can create or edit cascading style sheets in the CSS editor. The CSS editor has an easy-to-use interface for setting style properties. You can use the editor's graphical interface so that you don't have to edit raw CSS text.

To create a style sheet in your Web project

  1. From the Project menu, select Add Web Item and then Style Sheet.

  2. Type a name in the Name box and choose Open.

You can also create a style sheet independent from a Web project.

To create a style sheet outside of a Web project

  1. From the File menu, choose New File.

  2. On the left, choose Visual InterDev.

  3. On the right, Style Sheet.

  4. Type a name in the Name box and choose OK.

The CSS editor will be displayed with your new style sheet.

Using the CSS Editor

In the CSS editor you select an HTML tag, class, or unique ID in the left pane and then set its properties in the right pane. For information about the editor's interface, see .

Adding HTML Tags for Editing

Depending on the style sheet that you are editing, you may have many or just a few tags. If you need to modify the style of a tag that is not listed, you can add it to the list in the left pane.

To add an HTML tag

  • From the StyleSheet menu, choose Insert HTML Tag.

Editing HTML Tags

You can override the standard settings of an HTML tag.

To set style properties for an HTML tag

  1. Choose the + icon to expand the HTML Tags node.

  2. Select a tag.

  3. In the right pane, select tabs and options to set the properties of the style.

Editing Classes

You create a class to contain certain properties that you apply to a specific tag or make available to all tags.

To create a class

  1. From the StyleSheet menu, choose Insert Class.

  2. In the Insert New Class dialog box, type a name in the Class name box.

  3. If you want to apply the class to a specific tag, select Applies only to the following tag and select a tag from the list box.

After the class has been created and added to your style sheet, you can edit its properties in the right pane.

Editing Unique IDs

Unique IDs are used like classes except they can be used only once per page.

To create a unique ID

  1. From the StyleSheet menu, choose Insert Unique ID.

  2. In the Insert Unique ID dialog box, type a name in the Unique ID box.

  3. If you want to apply the ID to a specific tag, select Applies only to the following tag and select a tag from the list box.

After the ID has been created and added to your style sheet, you can edit its properties in the right pane.

Previewing a Style Sheet

You can preview how any page, local or on the World Wide Web, would look if the style sheet were applied.

To preview a style sheet applied to a page

  1. In the CSS editor, choose the Preview tab.

  2. In the address box, type the URL of any page.

Note   If the page you are previewing already has a style sheet attached, Visual InterDev recognizes that style sheet as the primary style sheet and correctly applies the one that you are editing as secondary.