CSS Properties Task Pane

Article ID: KB101743

The CSS Properties task pane is new to Expression Web. The task pane allows you to see what CSS properties are defined for the area you've selected and what rules apply to the area.

In this diagram below, the cursor is within the purple Heading 1. From the block selection tab, we know that the "color" class is applied to the h1 element. The CSS Properties panel shows all of the rules in the "Applied Rules" section from the stylesheet that apply to this particular selection. The rules show in the order that they apply -- so the .color class comes last. In the bottom "CSS Properties" section, the properties are shown for the selected rule (in this case, .color). Rules that have been set are displayed in bold blue text; in this case, the color property has been set to purple. If you want to edit the rule, you can make changes in the CSS Properties section and the stylesheet will be updated.

Rules shown in Properties panel

You can select a different rule from the Applied Rules list to see what properties has been set by that rule.

Selecting rule

The CSS Properties task pane will show you the actual stylesheet code when you hover over a rule. In the diagram below, you can see the stylesheet code for the heading elements when you mouse over the corresponding rule.

Viewing stylesheet code

You can click the Summary button. This will then show ALL the defined properties from all of the applied rules.

Summary button selected

Sometimes there will be a property that has been set to different values within different rules. The Summary button shows overridden rules with a line through the property name and the final set property. When you mouse over the overridden rule, Expression Web displays a note letting you know which rule has overridden that property.

Overridden rules

In summary, the CSS Properties panel...

• Is a good learning tool. You can view the corresponding stylesheet code and begin to understand how  the different lines of code affect the display.
• Allows you to modify properties of styles. Select the style from the applied rule list and modify the CSS properties below.
• Allows you to see how styles "cascade" and interact with each other. "Cascading styles" refers to styles that are defined for one element but then apply to child elements. You can then see how the different styles cancel each other out or build upon each other to produce different formatting.

---

Was this helpful?

Please rate this article:

Not helpful			Very helpful
1	2	3	4	5	6	7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)

Comments: (How can we improve this article?)


Clicking "Submit" will not clear this page.

---

link to this page: http://www.pixelmill.com/support/al1111/kb101743.htm
permalink to this article: http://www.pixelmill.com/support/kb101743.htm

Back to top