Author CSS by using IntelliSense

You can use IntelliSense to streamline the process of typing in Code view to create cascading style sheets (CSS) and apply styles to content.

Tip

Many features and commands you can use in the Code view of a page have keyboard shortcuts. For more information, see Keyboard shortcuts.

To use an IntelliSense shortcut (Auto Popup) menu in a CSS

1. In Code view, in a web page or in an external .css file, put your cursor where you want to author or apply CSS.

2. To display an IntelliSense shortcut menu for CSS, do one of the following.

   • Type a "<style ", "{", ".", "#", a CSS property, or ";".

   • On the Code View toolbar, click List Members .

   • On the Edit menu, point to IntelliSense, and click List Members .

     Tip

     If an IntelliSense shortcut menu doesn't appear, your cursor may not be in a valid location in the code for inserting an element, class, ID, property, or value, and the code that precedes the cursor may not be valid.

     Note

     In order for the IntelliSense shortcut menus to appear, the various statement completion options that appear in the IntelliSense tab of the Page Editor Options dialog box must be selected (default)

3. In the IntelliSense shortcut menu, to locate the item you want to insert into your code, do any of the following:

   • To move through the shortcut menu one item at a time, press the DOWN ARROW key or the UP ARROW key.

   • To move through the shortcut menu one block of visible items at a time, press PAGE DOWN or PAGE UP.

   • To move directly to a particular part of the shortcut menu, type the first letter of the item you want to go to in the list.

   • To scroll through the list, click the arrows on the vertical scrollbar.

     Tip

     To close the list without inserting any of the shortcut menu items, press ESC or click outside of the shortcut menu.

4. To insert a selected item from the shortcut menu into your code, do one of the following.

   • Press either TAB or ENTER.

   • Double-click the item.

   • On the Code View toolbar, click Complete Word .

   • On the Edit menu, point to IntelliSense, and click Complete Word.

To create a new style rule set by using IntelliSense

1. Do one of the following:

   • In Code view, in an external cascading style sheet, put your cursor in a blank line outside of any existing style rule sets.

   • In Code view, in an internal CSS in a web page, put your cursor in a blank line that's between the style element's start tag <style> and end tag </style> and outside of any existing style rule sets.

2. To define the selector for your rule set, do one of the following:

   • To create an element selector, type the first letter of the HTML element you want to use, and then select the element you want on the IntelliSense shortcut menu. If you then want to add a pseudo-class, child element, or similar selector, type the required separating characters, and then select the second element or pseudo-class you want from the IntelliSense shortcut menu.

   • To create a class selector, type a period, and then type a name for your class.

     If you're editing an internal CSS in a web page, an IntelliSense shortcut menu of class selectors that are in use in the web page appears.

   • To create an ID selector, type a number sign (#) and then a name for your ID selector.

     If you're editing an internal CSS in a web page, an IntelliSense shortcut menu of ID selectors that are in use in the web page appears.

3. To start the declaration block for your style's rule set, type a left curly ({).

4. In the IntelliSense shortcut menu of properties that appears, select the property you want to add to the current rule.

5. In the IntelliSense shortcut menu of values that appears, select the value or color you want to use or, if available, select Pick at the top of the list to specify a custom value.

6. To add an additional property rule to the current rule set, type a semi-colon (;) and then repeat steps 4 and 5.

To apply styles by using IntelliSense

1. In Code view, in your web page, put your cursor after the element name in the start tag of the element you want to style, and then press the SPACEBAR key.

2. In the IntelliSense shortcut menu, do one of the following:

   • To apply a class selector, select class.

   • To apply an ID selector, select id.

   • To create and apply an inline style, select style.

3. Do one of the following:

   • If you're applying a class or ID selector, in the IntelliSense shortcut menu, select the style you want.

   • If you're applying an inline style, in the IntelliSense shortcut menu, select the property you want to add to the current rule, and then in the IntelliSense shortcut menu of values, select the value or color you want to use or, if available, select Pick at the top of the list to specify a custom value. To add an additional property rule to the current rule set, type a semi-colon (;) and then repeat this step.

See also

Tasks

Set IntelliSense options for CSS
Use IntelliSense
Go to a hyperlink or bookmark (HTML anchor)

Concepts

Using IntelliSense with cascading style sheets
Cascading style sheet reference

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.