User Guide > Tasks > Working with Plugins > Working with the Ajax CSS View

Working with the Ajax CSS View

CSS style rules determine the formatting of an element. The CSS view provides four different tabs, each with a different approach to the CSS style rules in the browser, both active and inactive.

Style Rules Tab

The Style Rules tab is a list of the style rules for the selected node. This tab shows only the CSS rules that were defined by the author of the web page, or predefined internally in the web browser. The rules appear in the order they were defined.

The following are the columns that make up the view:

Rule - The name of the style rule. You can expand the properties of the rule.
Property - The style rule property. Each property is marked with a red or green square. Green indicates it is an active rule, while red indicates it is an inactive rule.
Value - The value of the property. Some values can be edited by clicking on them. See Editing a Value.
URL - The URL in which the rule applies.
Line Number - The location of the rule.

CSS View Style Rules Tab

The following functionalities are available for the style rules tab:

Edit an attribute's value
Add a property
Open CSS file
Toggle highlighting using the icon in the view

Editing a Value

This procedure describes how to edit the value of an attribute. Attributes are properties of a node. Editing their values also effects their expression in the browser.

Note:

Icons are enabled only for the CSS rules (entries in the "Style Rules" tab) that can be edited. You can edit only those rules that were added to the website using an external stylesheet (embedded <style> tag or in style="" parameter in any tag). Icons will not be enabled if:
- You have not selected anything in the "Style Rules" tab.
- You have selected a browser's internal rule. Internal rules can be recognized by a URL starting with "resource://..." instead of "http://..."

Instructions on how to complete a procedure

To edit a value:

Go to Window | Open Perspective | Web Browser Tools.
Click from the main toolbar.
The “Open URL…” dialog opens.
Enter a URL in the “Enter URL…” text field and press Enter.
The URL opens in the Internal Web Browser.
Select a node from the DOM Inspector view.
Open the CSS view and within it, the Style Rules tab.
The style rules and their properties appear.

Note:

You can edit only those rules that were added to the website using an external stylesheet (embedded <style> tag or in style="" parameter in any tag).

Click on the value of the style rule in the “Value” column and enter the new value.
The value of the style rule has been edited.

Adding a Property

This procedure describes how to add a property to a node.

Instructions on how to complete a procedure

To add a property:

Go to Window | Open Perspective | Web Browser Tools.
Click from the main toolbar.
The “Open URL…” dialog opens.
Enter a URL in the “Enter URL…” text field and press Enter.
The URL opens in the Internal Web Browser.
Select a node from the DOM Inspector.
Open the CSS view and within it the Style Rules tab.
The style rules and their properties appear.
Select a style rule from the “Rule” column and from the “Right Click Menu” select “Add Property” - or - click .
The “Add Property” dialog opens.
Enter the property name and value separated by a colon in the text field and click OK.
The property appears in the “Property” column and the browser has been modified accordingly.

Opening a CSS File

This procedure describes how to open a CSS file. A CSS file will be a source file of the rule selected in the "Style Rules" tab.

Instructions on how to complete a procedure

To open a CSS file of the style rule:

Go to Window | Open Perspective | Web Browser Tools.
Click from the main toolbar.
The “Open URL…” dialog opens.
Enter a URL in the “Enter URL…” text field and press Enter.
The URL opens in the Internal Web Browser.
Select a node from the DOM Inspector view.
Open the CSS view and within it, the Style Rules tab.
The style rules and their properties appear.
Select a style rule from the “Rule” column and from the “Right Click Menu” select “Open CSS file”, or click .
The style rule opens in a CSS file.

Computed Styles Tab

The Computed Styles tab is a list of the style rules for the selected node. This tab shows only those that will be used to render the particular tag; This is the list of all styles supported by the browser with their values calculated based on the definitions provided by page author.

The following are the columns that make up the view:

Rule - The name of the style rule. You can expand the properties of the rule.
Property - The style rule property. Each property is marked with a red or green square. Green indicates it is an active rule, while red indicates it is an inactive rule.
Value - The value of the property.
URL - The URL in which the rule applies.
Line Number - The location of the rule.

Computed Styles Tab in the Ajax CSS View

Box Model Tab

The box model in the Box Model tab provides the visual approach to the properties of the selected DOM element. This tab shows the width and height of the innermost dimension, the padding, the border, and the margin of the DOM element You can control which element you are analyzing using the Navigation Controls.

The following are the components that make up the view:

Rule - The name of the style rule. You can expand the properties of the rule.
Property - The rule property. Each property is marked with a red or green square beside it. Green indicates it is an active rule, while red indicates it is an inactive rule.
Value - The value of the property. Some values can be edited by clicking on them. See Editing a value.

CSS View Box Model Tab

The Navigation Controls control which element you are analyzing by moving throughout the hierarchal tree in the DOM Inspector.

The controls are used as follows:

Up - Navigates to the parent DOM element.
Down - Navigates to the first child DOM element.
Right - Navigates to the next sibling DOM element.
Left - Navigates to the previous sibling DOM element.

The box model in the view is made up of the following components:

Dimensions - The dimensions of the content of the element.
Padding - The width of the box padding. If the width of the padding is 0, it will be the same as the content edge.
Border - The width of the box border. If the width of the border is 0, it will be the same as the padding edge.
Margin - The width of the margin border. If the width of the border is 0, it will be the same as the border edge.

For more information on the Box Model see http://www.w3.org/TR/CSS2/box.html.

Diffs Tab

The Diffs tab allows you to view the changes made so far in the Style Rules tab. Some of the “Vaues” in the Style Rules tab can be edited, but the history of their values is not stored there. The Diffs tab is a way to compare the original style rules with the current (modified) style rules. If you have modified style rules in the “Style Rules” tab, the differences will automatically show in the “Diffs” tab. For more information see Editing a Value.

There are two options for comparing the style rules:

Show selection CSS diff - Compares the differences for the selected style rule only (selected in the Style Rules tab).
Show global CSS diff - Compares the differences for all the modified style rules in the node.

CSS View Diffs Tab

CSS View Icons

The CSS View includes the following icons:

	Add a property.
	Open a CSS file.
	Toggle highlighting.

Note:

Icons are enabled only for those CSS rules (entries in the "Style Rules" tab) that can be edited. You can edit only those rules that were added to the website using an external stylesheet (embedded <style> tag or in style="" parameter in any tag). Icons will not be enabled if:
- You have not selected anything in the "Style Rules" tab.
- You have selected a browser's internal rule. Internal rules can be recognized by a URL starting with "resource://..." instead of "http://..."