CSS Properties panel (HTML)

The CSS Properties panel is where you can view and modify the CSS properties of an HTML element that is selected on the artboard or in the Live DOM panel.

If you modify an HTML element directly on the artboard, the property changes will be reflected in the CSS Properties panel.

The reverse is also true: If you scale an object by using the value editor in the Sizing category in the CSS Properties panel, the object will scale on the artboard.

The CSS Properties panel

CSS Properties panel
B1_A

CSS properties   An expandable and collapsible list of CSS properties that can be sorted by category or by name. Click Expand 6375953d-074c-421a-bbb3-6f5055b67b64 or Collapse Collapse to switch between views.

B1_1

Applied Rules   Displays all of the CSS rules that apply to the selected HTML element, including inline, in-document, and external style sheets. The Winning Properties rule is a virtual rule that displays the CSS in effect for the selected HTML element.

B1_2

View set properties only   Select this box to display only those CSS properties that are set for the selected CSS rule.

B1_3

Category properties   Displays all of the properties associated with the expanded category.

B1_4

Color editor   Use to select a color directly from the color picker, by adjusting individual RGBA values, or by specifying hex values, in ARGB order.

The CSS Properties panel includes a number editor for entering values such as degrees, pixels, and percentages. For example, the RGBA color space text boxes in the preceding image are number editors.

You can adjust the value in the number editor in the following ways:

  • Click an existing numerical value and type the exact value you want.

  • Use the slider to change values by moving your pointer over the text box of the property, and then dragging when the numerical adjust pointer 99713193-615f-4ee2-a668-522b5572f389 appears.

  • Click in the text box of the property and use the Up and Down Arrow keys to adjust the value.

Most categories of properties in the CSS Properties panel have an expandable section which you can open by clicking Show advanced properties Advanced Properties icon | Blend at the bottom of the category. The advanced properties are less frequently used properties.

Show:
© 2014 Microsoft