Windows apps
Collapse the table of content
Expand the table of content

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

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.


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.


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


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


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.

© 2017 Microsoft