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.

What do you want to do?


How IntelliSense makes authoring styles easier

IntelliSense for CSS can insert the closing curly brace (}) for you when you begin a block of properties for a style and enables you to click references to either class-based styles or an external CSS in order to open the source of the reference. IntelliSense also enables you to quickly look up HTML elements, classes, ids, properties, and values as you type.

For example, if you type a CSS selector and then an opening curly brace ({), IntelliSense displays an alphabetical shortcut (Auto Popup) menu of all available properties. After you select a property from the menu or type the property, IntelliSense can display a different shortcut menu that contains values that are appropriate for the property you selected.

Top of Page Top of Page

About the symbols on the IntelliSense shortcut menu

The following table contains the symbols that appear in IntelliSense shortcut menus for CSS.

Symbol Description
Button
  • HTML element
  • Class-based style name
  • Id-based styles name
Button A property
Button A value
Button An option to set a custom value
Button An action

Top of Page Top of Page

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 one of the following:

<style

,

{

.

#

;

A CSS property.

  • On the Code View toolbar, click List Members.
  • On the Edit menu, point to IntelliSense, and then click List Members.

 Note   If an IntelliSense shortcut menu doesn't appear when you expect it to, your cursor may not be in a valid location in the code or IntelliSense options may be turned off. To turn them on, on the Tools menu, click Page Editor Options, and select the options you want on the IntelliSense tab.

  1. On the IntelliSense shortcut menu, locate the item you want to insert into your code by using the arrow keys, the PAGE UP and PAGE DOWN keys, or by typing the first letter of the item you want.
  2. To insert a selected item from the shortcut menu into your code, either double-click the item or press TAB or ENTER.

You can also click Complete Word Button on either the Code View toolbar or Edit menu.

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

Top of Page Top of Page

Create a new style rule set by using IntelliSense

  1. Do one of the following:
    • In an external cascading style sheet    In Code view, put your cursor in a blank line outside of any existing style rule sets.
    • In an internal CSS in a Web page    In Code view, 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-based 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-based style, type a period, and then a name for your class-based style. If you're editing an internal CSS in a Web page, an IntelliSense shortcut menu of class-based styles that are in use in the Web page appears.
    • To create an id-based style, type a number sign (#) and then a name for your id-based style. If you're editing an internal CSS in a Web page, an IntelliSense shortcut menu of id-based styles that are in use in the Web page appears.
  3. To start the declaration-block for your style's rule set, type an opening brace ({).
  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.

Top of Page Top of Page

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 SPACEBAR.
  2. In the IntelliSense shortcut menu, do one of the following:
    • To apply a class-based style, select class.
    • To apply an id-based style, 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-based style, 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.

Top of Page Top of Page

 
 
Applies to:
SharePoint Designer 2007