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
.png "CSS Properties panel")
.png "JJ129457.af4f4234-b404-40f2-86bf-26f72a4773dd(en-us,VS.110).png") |
CSS properties An expandable and collapsible list of CSS properties that can be sorted by category or by name. Click Expand |
.png "JJ129457.6375953d-074c-421a-bbb3-6f5055b67b64(en-us,VS.110).png")
or Collapse .png "Collapse")
to switch between views..png "JJ129457.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,VS.110).png") |
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. |
.png "JJ129457.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,VS.110).png") |
View set properties only Select this box to display only those CSS properties that are set for the selected CSS rule. |
.png "JJ129457.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,VS.110).png") |
Category properties Displays all of the properties associated with the expanded category. |
.png "JJ129457.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,VS.110).png") |
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. |
Value editors
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
.png "JJ129457.99713193-615f-4ee2-a668-522b5572f389(en-us,VS.110).png")
appears.Click in the text box of the property and use the Up and Down Arrow keys to adjust the value.
Advanced properties
Most categories of properties in the CSS Properties panel have an expandable section which you can open by clicking Show advanced properties .png "Advanced Properties icon | Blend")
at the bottom of the category. The advanced properties are less frequently used properties.
See Also
Concepts
Blend workspace (Windows Store apps)
Other Resources
The related documents view