One of the other cool new CSS features that
is also supported in both design and source view is the new CSS Properties
Window:
Figure 5
When you select an HTML element or ASP.NET server control,
the CSS property window will show you all of the CSS settings currently applied
to it. You can also change any of the values using the CSS
property grid. The "target rule" drop-down in the style toolbar
allows you to determine under what rule the settings are applied (read this blog post to learn more about the style toolbar
and target rule dropdown).
If, like me, you sometimes struggle with large CSS
stylesheets and find yourself shouting "why the $!#@ is it looking
like that?", you'll find the "summary" view of the CSS
Properties window really useful (just click the summary button at the top of
the CSS properties pane). When you press this button it
enables a filtering mode that shows you the full inheritance set of CSS
rules for the current HTML element or ASP.NET control you are working
with:
Figure 6
In the properties grid above you'll notice
that some values are duplicated multiple times - with red arrows striking out
previous values. This indicates that a parent CSS rule setting is being
overridden by another CSS rule's value. You can see both the original
value as well as the overridden one in the summary view at the bottom.
You can click on the individual values to see
where in the CSS precedence hierarchy this value was inherited from or
overridden. In the example below you can see that the final color
for the current element that my cursor is on is a dark brown color. If I
select this final color value, the CSS properties window will draw a blue box
in the applied-rules list above indicating that this setting is set in the
"singlecontent h3" rule:
Figure 7
If I click on the lighter brown color setting
that this rule overrode (and which has the red strike-thru), you can see that
it originated with the page's HTML body CSS rule (notice how the body rule
below is selected in the applied rules list when I select the overridden
value below):
Figure 8
Please read this dedicated CSS Properties Window blog post to learn even more how to
use the CSS property window.
