Chapter 3

Working with Text and Cascading Style Sheets

• Unordered lists are:– lists of items that do not need to appear in a

specific sequence.– usually preceded by a bullet, a small dot.– contain bullets are sometimes called bulleted lists.

Creating Unordered and Ordered Lists

Choosing a bulleted list style in the List Properties dialog box

Bulleted list styles

Style list arrow

Creating Unordered and Ordered Lists

• Ordered lists, which are sometimes called numbered lists, are lists of items that are presented in a specific sequence and that are preceded by sequential numbers or letters.

Creating Unordered and Ordered Lists

Choosing a numbered list style in the List Properties dialog box

Numbered list styles

Style list arrow

Creating Unordered and Ordered Lists

• You can format an ordered list to show different styles of numbers or letters by using the List Properties dialog box.

Creating Unordered and Ordered Lists

Creating an ordered list

Ordered list

items

Creating Unordered and Ordered Lists

• Definition lists are similar to unordered lists but have a hanging indent and are not preceded by bullets.

• They are often used with terms and definitions, such as in a dictionary or glossary.

Creating Unordered and Ordered Lists

List Properties dialog box

Square style Style list arrow

Creating Unordered and Ordered Lists

• Cascading Style Sheets (CSS) are made up of sets of formatting attributes called rules, which define the formatting attributes for page content.

Creating, Applying, and Editing Cascading Style Sheets

New CSS Rule dialog box

Class option for Selector Type

New rule name

Rule Definition list arrow

Creating, Applying, and Editing Cascading Style Sheets

• Rules are sometimes referred to as styles.• Style sheets are classified by where the code is

stored.

Creating, Applying, and Editing Cascading Style Sheets

Style Rendering toolbar

Toggle Displaying of CSS Styles button

Creating, Applying, and Editing Cascading Style Sheets

• The code can be saved in a separate file (external style sheet), as part of the head content of an individual web page (internal or embedded styles), or as part of the body of the HTML code (inline styles).

Creating, Applying, and Editing Cascading Style Sheets

• CSS are also classified by their type:– A Class type can be used to format any page

element.– An ID type and a Tag type are used to redefine an

HTML tag.– A Compound type is used to format a selection.

Creating, Applying, and Editing Cascading Style Sheets

• You use buttons on the CSS Styles panel to create, edit, and apply rules.

• Use the CSS Styles panel to manage your styles.

Creating, Applying, and Editing Cascading Style Sheets

• A CSS rule consists of two parts:– The selector is the name of the tag to which the

style declarations have been assigned.– The declaration consists of a property (such as

font-size or font-weight) and a value.

Creating, Applying, and Editing Cascading Style Sheets

Creating a Tag selector

Select Tag (redefines an HTML element)

Type or select 1

Verify that su_styles.css will be the location for the

new rule

Creating, Applying, and Editing Cascading Style Sheets

• External style sheets are separate files in a website, saved with the .css file extension.

• CSS can be part of an HTML file, rather than a separate file.

• These are called internal, or embedded, style sheets.

Adding Rules and Attaching Cascading Style Sheets

• External CSS files are created by the web designer.

• Embedded style sheets are created automatically in Dreamweaver if the designer does not create them, using default names for the rules.

Adding Rules and Attaching Cascading Style Sheets

• Embedded style sheets apply only to a single page, although you can copy them into the code in other pages or move them to an external style sheet.

Adding Rules and Attaching Cascading Style Sheets

• When you have several pages in a website, you will probably want to use the same styles for each page to ensure that all your elements have a consistent appearance.

• To do this, use the Attach Style Sheet button on the CSS Styles panel.

Adding Rules and Attaching Cascading Style Sheets

• When an HTML file is linked to other files necessary to display the page content, these files are called related files.

• It takes both the HTML file and the CSS file working together to display the content properly.

Adding Rules and Attaching Cascading Style Sheets

Code for embedded rules and a link to an external style sheet

Style sheet name in the Related Files toolbar

Embedded rules are embedded in the head content

Link to external style sheet

Adding Rules and Attaching Cascading Style Sheets

• You can customize the way your page code appears in Code view. You can: – wrap the lines of code– display or hide line numbers and hidden

characters– highlight invalid code so you can fix it

Using Code Tools to View and Edit Rules

• You can customize the way your page code appears in Code view. You can: – have different code types appear in different

colors.– indent lines of code.– display syntax error alerts.

Using Code Tools to View and Edit Rules

• As your pages get longer and the code more complex, you can collapse sections of code.

• Collapsing code lets you temporarily hide code between two different sections of code that you would like to read together.

Using Code Tools to View and Edit Rules

Selecting lines of code on the index page to collapse

Clicking either minus sign will

collapse the selected code

Select the code in lines 8 through 18 (your line numbers may vary slightly)

Using Code Tools to View and Edit Rules

• If you are typing code directly into Code view, Dreamweaver can speed your work by offering you code hints.

• Code hints are lists of tags that appear as you type.

Using Code Tools to View and Edit Rules

Using code hints

As you begin typing code, the shortcut menu appears

when Dreamweaver recognizes the code

Double-click from the list to complete your tag

Using Code Tools to View and Edit Rules

• You can also convert one type of style to another.

• You can move an embedded style to an external style sheet or an inline style to either an embedded style or a style in an external style sheet.

Using Code Tools to View and Edit Rules

Moving the embedded small_text rule to the external style sheet file

Selected code for small_text rule

Move CSS Rules command

Using Code Tools to View and Edit Rules

Moving the embedded style to the external style sheet file

The embedded small_text rule will

move to the su_styles file

Using Code Tools to View and Edit Rules