"CSS Inspector" tab

The "CSS Inspector" tab is used to create and re-edit CSS style sheet tags.

The tab window is divided into three parts:

  • Inspector menu
  • A list of style properties
  • Preview pane

You can also choose the method of displaying the list of properties and the scope of displayed properties (compliance with individual CSS specifications)

Inspector menu

The inspector's menu consists of the following commands:

Click to expand the menu for creating classes and selectors:

  • New selector - Creates a new empty selector with no name
  • New selector from the current one - Creates a new selector with no name that will contain the properties set in the list
  • New class - Asks for a name and creates a new empty class
  • New class from current - Asks for a name and creates a new class that will contain the properties set in the list
  • Selector wizard - Launches the new empty selector wizard
  • Selector wizard based on the current one - Launches the wizard for a new empty selector which will contain the properties set in the list

Click to expand the menu with commands for inserting styles using a tag:

  • Embrace with SPAN (inline) - Click to embrace the selected text with a SPAN tag with a style attribute that will contain the properties set in the list
  • Embracewith - Click to create a new class based on the settings in the property list and embrace the selected text with a SPAN tag with the class attribute pointing to this class
  • Embrace with DIV (inline) - Click to embrace the selected text with a DIV tag with a style attribute that will contain the properties set in the list
  • Embrace with DIV (class) - Click to create a new class based on the settings in the inspector's property list and embrace the selected text with a DIV tag with the class attribute pointing to this class

Click to expand the property list content control menu:

  • Lists properties
  • Displays properties in a grouped manner
  • Expand all groups
  • Collapse all groups
  • All properties
  • Compliant with CSS1
  • Compliant with CSS2
  • Compliant with CSS3
  • Compliant with CSS Mobile 1

Help - opens this help window.


List of classes and selectors in the document
The list includes all the classes and selectors that exist in the current document and in external CSS sheets attached to it. List items are grouped into embedded and included (the name of the files with CSS sheets is given). Select the class or selector you want to edit from the list.

List of style properties

The list includes all properties available in CSS styles. Using the menu, you can define the appearance of the list and the range of displayed properties (compliance with individual CSS specifications).

If you select Displays properties in list form, all properties will be displayed in alphabetical order in one sequence. If, on the other hand, you select Displays properties in a grouped manner, the properties will be divided into groups:

  • Blocks
  • Font
  • Sound
  • Generated
  • Classification
  • Colors and background
  • Scrollbars
  • Page
  • Tables
  • Text
  • Visual

Note!
If you can't see any of the groups, you probably have set the display property restriction to one of the specifications.

Ctrl+F1 - context-sensitive help for style properties
If you want help with a style property on which the cursor is positioned, use the keyboard shortcut Ctrl+F1. For more on this topic, see Support for CSS - Context-sensitive help.

Preview pane

The preview pane is at the bottom of the tab. It allows you to preview the formatting according to the set style properties before inserting it into the document. On the right side there is a button:

Choice of browser used
Click to select the browser used for browsing on this tab. As long as it is installed on your system(read more about this), you can use the browser:

  • MS Internet Explorer
  • Mozilla

Related topics

To top