Working with Text and Cascading Style Sheets

Chapter 3

Using Cascading Style Sheets• Cascading Style Sheets (CSS)

– Sets of formatting instructions, usually stored in a separate file, that control the appearance and position of text and graphics on a web page or throughout a website.

– Defines consistent formatting attributes for page elements such as paragraph text, lists, and table data.

Using Cascading Style Sheets• Formatting Text as Lists

– Excellent for creating simple navigation bars– Format list items to look like buttons by

applying styles and background colors• Unordered • Ordered• Definition

Using Cascading Style Sheets• Creating Unordered Lists

– List items that do not need to appear in a specific sequence

– Preceded by a bullet• Small dot or similar icon• Often called a bulleted list

– Select text you want to format as a list– Use the Unordered List button in the HTML

Property Inspector to insert bullets

Using Cascading Style Sheets• Formatting Unordered Lists

– The default bullet style is round dot– Change using CSS– Create a rule to modify

Using Cascading Style Sheets• Creating Ordered Lists

– Lists of items that are presented in a specific sequence and are preceded by a sequential number or letter.

– Often called a numbered list

Using Cascading Style Sheets• Formatting Ordered Lists

– You can format to show different styles of numbers or letters by using CSS

Using Cascading Style Sheets• Creating Definition Lists

– Similar to unordered lists, but have a hanging indent and are not preceded by a bullet.

– To create:• Select text you want to use for the list• Click Format on the Menu bar• Point to List• Click Definition List

Lesson 1 Practice

Complete pages DreamWeaver 3-6 thru 3-9

Create, Apply and Edit CSS• Understanding CSS

– Made up of sets of formatting attributes called rules

• Define the formatting attributes for page content

• Sometimes referred to as styles– Classified by where the code is stored

• External style sheet– Separate file

• Internal (embedded) style– Part of the head content of an individual page

• Inline style– Part of the body of the HTML code

Create, Apply and Edit CSS• Understanding CSS

– Also classified by type• Class type

– Used to format any page element• ID type/Tag type

– Used to redefine an HTML tag• Compound type

– Used to format a selection

Create, Apply and Edit CSS• Using the CSS Styles Panel

– Use buttons on the CSS Styles panel to create, edit, and apply rules.

– To add a rule, use the New CSS Rule dialog box to name the rule

– Use the CSS Rule definition dialog box to set the formatting attributes for the rule

Create, Apply and Edit CSS• Understanding the Advantages of Using

Style Sheets– Use to save an enormous amount of time

• Make hundreds of formatting changes in a few minutes

– Create a more uniform look from page to page– Generate cleaner code – Separates the development of content from the

way the content is presented

Create, Apply and Edit CSS• Understanding CSS Code

– 2 parts• Selector

– Name of the tag to which the style declarations have been assigned

• Declaration – Property (font size and font weight) and a value

(14 px or bold)

Lesson 2 Practice

Complete pages DreamWeaver 3-12 thru 3-19

Add Rules and Attach CSS• Understanding External and Embedded

Style Sheets– External CSS file are created by the web

designer– Embedded style sheets are created

automatically in Dreamweaver if the designer does not create them

Add Rules and Attach CSS• Understanding Related Page Files

– Related Files• An HTML file that is linked to other files

necessary to display page content• When a file that has related files is open in the

Document window, each related file name is displayed in the Related Files toolbar above the Document window.

• CSS is an example of a related file

Lesson 3 Practice

Complete pages DreamWeaver 3-22 thru 3-25

Use Coding Tools to View and Edit Rules

• Coding Tools in DreamWeaver– Coding toolbar appears when in Code view on

the left side of the Document window

• Using Coding Tools to Navigate Code– Helpful to collapse code

• Temporarily hide code between two different sections

• Click minus sign next to the line number

Use Coding Tools to View and Edit Rules

• Using Code Hints to Streamline Coding– Code Hints

• Lists of tags that appear you type– Converting Styles

• Able to move an embedded style to an external style

– Select the style in Code View– Right-click the code– Point to CSS style, then click Move CSS Rules

Lesson 4 Practice

Complete pages DreamWeaver 3-28 thru 3-31

Skills Review

Complete pages DreamWeaver 3-32 thru 3-33