CSS Properties panel

You can use the CSS Properties panel in tandem with an open web page, external CSS file, or with the Manage Styles panel to review and change the properties and values of existing styles. I prefer working with the CSS Properties panel as it allows me to use css shorthand in writing the style rules.

If you have a web page open in Expression Web, the CSS Properties panel lets you quickly see all of the styles that the current selection in your web page uses, the order of precedence of those styles, and all of the properties and values of those styles.

On this page for example, the screenshot shows the body element selected. 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.

Click thumbnail for larger image

CSS Properties Panel

1	The Show categorized list button organizes the list of properties under categories, such as Font and Block. The Show alphabetized list button organizes the list of properties into a single alphabetical list. The Show set properties on top button organizes the list of properties so that properties that you have set in the selected style appear at the top of the list.
2	The Summary button lists together, under the CSS Properties column, all of the properties that affect the current selection, instead of only the properties of a selected style. In summary mode, you can click a property under CSS Properties to outline the associated rule under Applied Rules. To get out of summary mode, click Summary again or click a rule under Applied Rules.
3	Applied Rules lists the selector of each style that affects the current selection. Styles are listed in ascending order of precedence, from lowest precedence at the top of the list to highest precedence at the bottom. Point at a selector to see the entire rule set in a ScreenTip. Select a selector to display its properties under CSS Properties. Double-click a selector to go to the code of that rule set.
4	This column lists the tag to which each style is applied and the selector of the style. Point at a row in this column to see the applied rule. The column is labeled Current Page when the selected style resides in an internal CSS or labeled with the name of an external CSS file when the selected style resides in an external CSS. You can point at the external CSS file name to see the path to the file or click the external CSS file name to open the file.
5	CSS Properties lists the values of properties you've set in the style selected under Applied Rules and also all unset properties. Double-click a property to go to the code of that rule set.
6	When the Show categorized list button and the Show set properties on top button are both selected, properties of the selected style are grouped at the top of each category's list of properties.
7	You can set the value of a property by, in the box next to the property name, typing a value or pointing at the box and then clicking, when available, the drop-down arrow or pick button and selecting a value.
8	Properties that have a red line through them are set by the selected style but either aren't inherited by the current selection or are overridden by another style. To see a ScreenTip that provides more information, point at a crossed-out property. The ScreenTip for overridden properties identifies the overriding property. Tip: In the CSS Properties panel, to display a shortcut menu that contains additional options for working with your CSS, right-click a selector under Applied Rules.

To modify a style by using the CSS Properties panel

You have created your site using one of the default templates that came with Expression Web. Now you would like to make some changes to the style rules in the style sheet. Using the organization 3 site we created in the tutorial Creating web site from site templates in Expression Web

Step 1: Open a web page that uses the style that you want to modify.

Step 2: In the CSS Properties panel, if the style that you want to modify doesn't appear in the Applied Rules list, put your cursor in content or select content that uses the style that you want to modify.

Step 3: In the Applied Rules list, click the name of the style that you want to modify. Example: click body under the Applied Rules list.

Step 4: In the CSS Properties section of the CSS Properties panel, set the properties you want.
Example: Click the drop-down next to font-family and select the font-family you wish to use. In this case, I chose a custom font-family I had added consisting of Tahoma, Helvetica, Arial, sans-serif.

If you need instructions on how to add new font families, you can follow this tutorial Creating a New Font Family Group in Expression Web.

Copyright © Pat Geary of Expression Web Tutorials and Templates
Published  May, 2010