Explore CSS Properties Panel in Expression Web 3

Posted by: Minal Agarwal , on 1/23/2010, in Category Expression Web
Views: 22925
Abstract: Expression Web 3 Panels (known as task panes in earlier versions) contain all the tools you would require while developing you web pages. Panels have been classified according to the type and categories of tools. All the panels are available in the Panels menu in Expression Web 3. In this article, we will explore the CSS Properties panel.
Explore CSS Properties Panel in Expression Web 3
 
Expression Web 3 Panels (known as task panes in earlier versions) contain all the tools you would require while developing you web pages. Panels have been classified according to the type and categories of tools. All the panels are available in the Panels menu in Expression Web 3. These panels can be docked or left floating in the workspace as per your convenience. In this article, we will explore the CSS Properties panel.
CSS Properties Panel displays the applied rules and the all the CSS properties along with those defined in those rules. By default, the panel shows the styles in the order of precedence. But the Panel allows you to customize your view. You can use the CSS Properties Panel along with the Apply and Manage Styles Panel, external CSS files and internal CSS styles to define new and redefine existing CSS rules.





CSS_Properties
The CSS Properties Panel is broadly divided into three sections:
View options:
 
1.    Show categorized list button arranges the list of properties under categories such as Font, Block, Background, Border and so on.
 
2.    Show alphabetized list button arranges the list of properties into an alphabetically sorted list.
 
3.    Show set properties button on top button organizes the list of properties so that the properties that are set are always displayed at the top.
This view works in conjunction with either of the above two views. If the’ Show categorized list’ button is selected with this button then the set properties would top the list within the displayed categories. And if this view is chosen along with Show alphabetized list, then all the set properties are lined up at the top, alphabetically.
 
4.    Summary button summarizes all the CSS Properties that have been defined in the current selection in the page. And if you select any particular property (while the Summary button still active) the Applied Rules section will highlight the rule to which the property has been associated.
 
Applied Rules:
 
The Applied Rules lists the all selectors of all the styles of the current selection of the page. For example consider this code:
<body>
<div id="log_bar">
          <label id="userNm_lbl">Username :</label>
          <input name="userNm_inp" type="text" style="width: 109px; height: 12px" value="Enter User name" />
</div>
 
Your cursor is placed in the <input> tag. Then the Applied Rules lists the following:
AppliedRules
This shows that the styles are displayed in an ascending order or precedence, the lowest precedent tops the list followed by the highest ones.
The Applied Rules section is again divided into two columns. The left column shows the selectors and the right column shows the tags and the selectors applied to them. As you point at a selector, the screen tip shows the entire rule set. Click the selector to display all the CSS Properties set in the CSS Properties section below in the Panel.
TIP: Double click on the selectors in the Applied Rules section to go to the code. You can also right click on the selector or any property in the CSS Properties section for few menu options.
CSS Properties:
 
CSS Properties section lists all the unset properties and the set properties along with their values. The set CSS properties values’ are displayed for those properties that are defined in the styles selected under the Applied Rules section. To view the rules for the property, double click on it.
The CSS Properties section has two columns; Property and its value. To change or assign a value to any property just click in the value box. A drop down arrow or a pick button would appear depending upon the set of values available for that property. Click on the buttons to choose a value.
NOTE: You may observe that some properties which have a red strike through them. Such properties denote that they are set by the selected style, but either are overridden by another style or are not inherited by the current selection. In such case, to know if a property is overridden or inherited, just point at that property and the screen tip would show the description.

I hope this article was helpful and that you enjoyed reading it.

If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel