adobe dreamweaver cs5 on demand part 37 pptx

Move CSS Rules to an Existing Style Sheet Open the document with the CSS rules you want to move.. Click the Style Sheet option, and then select an existing style sheet already linked t

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 select 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

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 select 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

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

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 ( )

4

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 return 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

6

8

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