adobe dreamweaver cs5 on demand part 37 pptx

ptg
226 Chapter 9
After you create a set of CSS rules that you like, you can move them
from one document to another, from the head of a document to an
external style sheet, and between different external CSS files. If a con-
flict arises when you move a CSS rule from one place to another, you
can specify how you want Dreamweaver to handle it.
Moving CSS Rules
Move CSS Rules to a New
Style Sheet
Open the document with the CSS
rules you want to move.
Open the CSS Styles panel or
display Code view.
Select the rule or rules you want
to move.
◆ To se lect multiple rules, Ctrl-
click (Win) or A-click (Mac)
the rules you want to select.
Right-click (Win) or Control-click
(Mac) the selection, point to CSS
Styles, and then click Move CSS
Rules.
Select the A New Style Sheet
option.
Click OK.
Enter a name for the new style
sheet.
Click Save.
8
7

6
5
4
3
2
1
2
3
5
6
4
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 227
Move CSS Rules to an Existing
Style Sheet
Open the document with the CSS
rules you want to move.
Open the CSS Styles panel or
display Code view.
Select the rule or rules you want
to move.
◆ To se lect multiple rules, Ctrl-
click (Win) or A-click (Mac)
the rules you want to select.
Right-click (Win) or Control-click
(Mac) the selection, point to CSS
Styles, and then click Move CSS
Rules.
TIMESAVER

Drag a rule in the
CSS panel to a new position. For
example, you can drag a rule from
the internal document to the
external document.
Click the Style Sheet option, and
then select an existing style sheet
already linked to the document
from the menu or click Browse to
select an existing style sheet.
Click OK.
6
5
4
3
2
1
2
3
5
6
Did You Know?
You can rearrange or move CSS rules
by dragging.
Open the Styles panel,
click the All button, select the rules
you want to move, and then drag them
to the new location. You can move a
rule to another style sheet or the docu-
ment head or rearrange rules within a

style sheet.
4
From the Library of Wow! eBook
ptg
228 Chapter 9
2
3
Instead of deleting a CSS rule that you might want to use in the future,
you can disable one or more rule properties (New!). When you need it
again, you can enable it. When you disable a CSS rule property,
Dreamweaver wraps the CSS code as a comment. In the CSS Styles
panel, you can use the Disable/Enable CSS Property button to disable
or enable individual properties. When you disable a property, the red
universal no sign (circle with a line thru it) appears next to it in the CSS
Styles panel and Code Navigator. If you assign a new value to a dis-
abled property, Dreamweaver automatically enables it.
Disabling or Enabling
CSS Rules
Disable or Enable CSS Rule
Property
Open the document with the CSS
properties you want to
disable/enable.
Open the CSS Styles panel.
Select the rule with the property
you want to disable/enable.
Select the CSS property you want
to disable/enable.
Click the Disable/Enable CSS
Property button.

TIMESAVER
Point to the left of
the property name in the CSS
Styles panel, and then click a
blank area to disable a property or
click a Disable icon to enable a
property.
5
4
3
2
1
5
Did You Know?
You can enable all disabled properties
in a selected rule.
In the CSS Styles
panel, select the rule, click the Options
menu, and then click Enable All
Disabled In Selected Ruler (New!).
You can delete all disabled in a
selected rule.
In the CSS Styles panel,
select the rule, click the Options menu,
and then click Delete All Disabled In
Selected Ruler (New!).
4
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 229

CSS Inspect works together with Live View to quickly identify HTML
elements and their associated CSS styles to give you immediate feed-
back (New!). In Live View, you can click the Inspect button on the
Document toolbar to enable the feature. With CSS Inspect enabled, you
can move the mouse over elements on your page to see the CSS box
model attributes for any block level element. When an element is high-
lighted in Live View, the corresponding HTML code is selected in Code
or Split view. You can also view the CSS styles and properties for the
selected element in the CSS Styles panel. CSS Inspect works best with
the CSS Styles panel open in Current mode, and the Document window
in Split Code/Live View and Live Code. If the workspace is not in this set
up, the Info bar appears, asking you to switch to it.
Inspecting CSS Code
Inspect CSS Styles
Open the Web page you want to
view.
Switch to Design, Split, or Code
view.
Click the Live View button.
Click the Inspect button.
If the Info bar opens asking you to
switch to the best workspace,
click the Switch now link.
The CSS Styles panel opens in
Current mode, and the view
changes to Split Code and Live
Code view.
Point to HTML elements on the
page to display CSS styles in the
CSS Styles panel.

Click the Refresh button in the
Document toolbar or press F5 to
view any changes.
If you want, make CSS changes,
select the element, and then make
the changes you want in the CSS
Styles panel.
To re turn back to Design view,
click the Live View button again.
9
8
7
6
5
4
3
2
1
5
Info bar
3
4
2
9
7
Info bar
6
8
From the Library of Wow! eBook
ptg

230 Chapter 9
Understanding Inheritance
With CSS, certain properties can be inherited
from parent elements, making it easy to style
one element and have all the descendent ele-
ments display the same style. This reduces
the size of your CSS code and makes it easier
to read, debug, and maintain. When you
apply a style to an element, any property that
can be inherited is passed to any child, or
nested, elements. For example, if you apply
the font properties of Times New Roman and
14px to the <p> tag, any nested <em> element
would also be Times New Roman at 14 px. If
styles conflict, the style closes to the element
is applied. You can use the Relevant CSS tab
to help you determine which style is in
control and make any adjustments that you
want.
Using the Relevant CSS Tab
The Relevant CSS tab lets you track the CSS
rules affecting the currently selected text ele-
ment as well as modifying the rule's proper-
ties. The Relevant tab is located in the Tag
Inspector. Click the Window menu, and then
click Tag Inspector. The Relevant CSS tab con-
sists of two sections:
◆ The upper portion of the Relevant CSS
tab shows the rules affecting the current
selection and the tags that they affect.

◆ The lower portion of the Relevant CSS
tab displays the properties of the
currently selected element in an editable
grid.
The properties are arranged alphabetically,
with the set properties sorted to the top of the
tab. Set properties are displayed in blue;
properties irrelevant to the selection are dis-
played with a red strike through line.
Hovering over a rule that is irrelevant displays
a message explaining why the property is
irrelevant. Typically, a property is irrelevant
because it is overridden or not an inherited
property.
You can also use the lower panel of the
Relevant CSS tab to modify the properties of
a selection. The editable grid lets you change
the values for any of the displayed properties.
Any changes you make to a selection are
applied immediately, letting you preview your
work as you go.
Using the Relevant CSS Tab
From the Library of Wow! eBook