adobe dreamweaver cs5 on demand part 36 pdf

From the Properties panel, you can display or change the selected target rule, edit the rule definition, access the CSS Styles panel, and change text style formatting.. Editing CSS in th

The CSS Styles panel lists all the internal and external styles attached

to the active Web page Dreamweaver allows you to edit the internal and external styles with the CSS Styles panel and the Properties panel

If you only want to work with the CSS style for the currently selected text, you can use the Properties panel From the Properties panel, you can display or change the selected target rule, edit the rule definition, access the CSS Styles panel, and change text style formatting When you change CSS rules, the rule properties are updated in the head of the document or to an external style sheet You can quickly toggle back and forth between CSS rule properties and HTML formatting properties

on the Properties panel

Editing CSS in the

Properties Panel

Edit CSS in the Properties Panel

Open the Web page that contains

the stylized text you want to view

Click the insertion point inside the

block of text with the CSS rule that

you want to edit

Click the CSS button in the

Properties panel

The following options are available

on the Properties panel:

◆ Targeted Rule Displays the

selected rule You can use the

list arrow to create new CSS

rules, in-line styles, or apply

existing classes to selected

text

◆ Edit Rule Opens the CSS Rule

Definition dialog box for the

selected rule

See “Setting CSS Properties,”

on page 222 for information on

available options in the CSS

Rule Definition dialog box

◆ CSS Panel Opens the CSS

Styles panel and displays

properties for the selected rule

◆ Font Sets the font family to the

selected rule

◆ Size Sets the font size to the

selected rule

4

3

2

1

2

◆ Text Color Sets the font color

to the selected rule

◆ Bold Adds bold to the selected

rule

◆ Italic Adds italic to the

selected rule

◆ Left, Center, and Right Align

Adds alignment to the selected

rule

Set HTML Formatting in the

Properties Panel

Open the Web page that contains

the stylized text you want to view

Select the text you want to format

Click the HTML button in the

Properties panel

The following options are available

on the Properties panel:

◆ Format Sets the paragraph

style

◆ ID Assigns an ID to the

selection

◆ Class Displays the class style.

◆ Bold Applies <b> or <strong>

◆ Italic Applies <i> or <em>

◆ Unordered or Ordered List.

Creates a bulleted or numbered

list

◆ Indent and Outdent Adds or

removes an indention

◆ Link Creates a hyperlink.

◆ Target Specifies the frame or

4

3

2

1

4

4 3

After you create a new CSS rule, you can alter properties for it The CSS Rule Definition dialog box lets you select the CSS properties you want to define a CSS rule You can set CSS properties for any of the fol-lowing categories: Type, Background (image and color), Block (spacing and alignment), Box (placement), Border (width, color, and style), Lists (bullets or numbers), Positioning (on page), and Extensions (filters, page breaks, and pointers)

Setting CSS

Properties

Set CSS Properties

Open the Web page that contains

CSS styles (internal or external)

you want apply properties

Open the CSS Styles panel

Double-click the rule or property

you want to define

TIMESAVER Select the rule or

property, and then make changes

to the available attributes in the

lower panel in the CSS Styles

panel Use the Show buttons at the

bottom of the CSS Styles panel to

display different attributes

Specify the options you want in

the CSS Rule Definition dialog box:

◆ Type and Font Click the Type

category, and then specify the

following options: Font, Size,

Style, Line Height, Decoration

(underline, overline,

line-through, or blink), Weight

(boldface), Variant (small caps),

Case (first letter, uppercase or

lowercase), or Color

◆ Background Image and Color

Click the Background category,

and then specify the following

options: Background Color,

Background Image, Repeat,

Attachment, or Horizontal

Position and Vertical Position

4

3

2

3

External style sheet

Properties for selected style Internal style sheet

◆ Spacing and Alignment Click

the Block category, and then

specify the following options:

Word Spacing, Letter Spacing,

Vertical Alignment, Text Align,

Text Indent, Whitespace

(Normal collapses white space,

Pre works like the pre tag, or

Nowrap only with br tag), or

Display

◆ Placement Click the Box

category, and then specify the

following options: Width and

Height, Float, Clear, Padding,

Same For All (padding), Margin,

or Same For All (margins)

◆ Border Width, Color, and Style

Click the Border category, and

then specify the following

options: Style, Same For All

(style), Width, Same For All

(width), Color, or Same For All

(color)

◆ Bulleted and Numbered Lists

Click the List category, and

then specify the following

options: Type, Bullet Image, or

Position

◆ Page Positioning Click the

Positioning category, and then

specify the following options:

Type (Absolute, Relative, Fixed,

or Static), Visibility (Inherit,

Visible, or Hidden), Z-Index,

Overflow, Placement, or Clip

◆ Filters, Page Breaks, and

Pointers Click the Extensions

category, and then specify the

following options: Pagebreak,

Cursor, or Filter

Click OK.

5

5

4

Click the Current button to display the style for the selected text.

A CSS rule consists of two parts: selector and declaration The selector

identifies the formatted elements (such as p, body, or h1), while the

declaration defines the style properties The declaration is a collection,

known as a block, of properties and values For example, font-family:

Arial; defines the text style as the Arial font The declaration is every-thing between the braces ( {} ) After you create a CSS rule, you can use the CSS Styles panel to modify and customize it to better suit your needs If you no longer need a CSS rule, you can remove it

Working with CSS

Rules

Modify an Existing Rule

Open the Web page that contains

CSS styles with the rule you want

to apply a property

Open the CSS Styles panel

Select a rule from the available

options in the All Rules pane (All

mode) or select a property in the

Summary for Selection pane

(Current mode)

Use any of the following methods:

◆ Double-click a rule or property

to open the CSS Rule Definition

dialog box Make changes to

the rule, and then click OK to

save the changes

◆ Click the Show Only Set

Properties button, click the Add

Properties link, and then fill in a

value for the property in the

Properties panel

◆ Click the Show Category View

or Show List View button, and

then fill in a value for the

property in the Properties

panel

4

3

2

1

4

2

Show category view

3

4 Show list view 4 Show only

set properties

Delete an Existing Rule

Open the Web page that contains

CSS styles with the rule you want

to delete

Open the CSS Styles panel

Select a rule from the available

options

Click the Delete button in the CSS

Styles panel

NOTE The rule will be deleted

and all text the rule was attached

to will revert back to their default

format

4

3

2

1

4

2

3

Did You Know?

You can edit a CSS style sheet Instead

of editing individual rules, you can edit

the entire style sheet Click the

Window menu, click CSS Styles to

open the CSS Styles panel, click the All

button, double-click the name of the

style sheet you want to edit, modify the

style sheet in the Document window,

and then save your changes

You can change the name of a CSS

selector Open the CSS Styles panel,

click the All button, click the selector

you want to change, click it again to

make the name editable, change the

name, and then click Enter (Win) or

Return (Mac)