© 2011 delmar, cengage learning chapter 3 working with text and cascading style sheets

© 2011 Delmar, Cengage Learning

Chapter 3

Working with Text and Cascading Style Sheets

© 2011 Delmar Cengage Learning

1. Create unordered and ordered lists

2. Create, apply, and edit Cascading Style Sheets

3. Add rules and attach Cascading Style Sheets

4. Use coding tools to view and edit rules

Chapter 3 Lessons


• You should break up the text on a web page into smaller paragraphs or organized as lists. The lists include:– Unordered– Ordered– Definition

Working with Text and CascadingStyle Sheets


• When you use the Cascading Style Sheets (CSS) all of your page elements will have consistent appearance.

• You can apply CSS formatting to a single document or all the pages in a website.



Tools You’ll Use



• Unordered lists, sometimes called bulleted lists, are lists of items that do not need to appear in a specific sequence.

• These items are preceded by a bullet.

Create Unordered and Ordered Lists


In Dreamweaver, the default bullet style is a round dot, but you can change it in the List Properties dialog box.

Tools You’ll Use



• Ordered lists, sometimes called numbered lists, are lists of items that are presented in a specific sequence.

• These lists are preceded by sequential numbers or letters.



An ordered list is appropriate for a list in which each item must be executed according to its specific order.

Tools You’ll Use




• You can format an ordered list to show different styles of numbers or letters.

• Definition lists are displayed with a hanging indent and are not preceded by bullets.


• Cascading Style Sheets (CSS) are made up of sets of formatting attributes called rules.

• Rules, also referred to as styles, define the formatting attributes for page content.

Create, Apply, and Edit Cascading Style Sheets


• The external style sheet is a separate file where you can save code.

• Style sheets are classified by where the code is stored.



• Code can be stored:– In a separate file (external style sheet)– As part of the head content of an

individual web page (internal or embedded style sheet)

– As part of the body of the HTML code (inline styles)



Cascading Style Sheet file created in striped_umbrella site root folder



• CSS are also classified by 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



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

• Once you add a new rule to a style sheet, it appears in a list in the CSS Styles panel.

• You can apply CSS rules to elements or to all of the pages of a website.



• The benefits of using CSS:– You can define a rule and apply it to all pages

of your website– They create a more uniform look and they

generate cleaner code– They separate the development of content

from the way the content is presented– They are much more compliant with current

accessibility standards



• 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) and a value (such as bold)



Viewing CSS code


Selector Declaration

Property Value


• Style sheets can be used to format page backgrounds, link properties, and determine the appearance of almost any object on the page.

Add Rules and Attach Cascading Style Sheets

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


• You can attach, or link external style sheets, to any page.

• If you decide to edit a rule, the changes will automatically be made to every objects that it formats.



• Related files are HTML files that are linked to other files necessary to display page content.

• A Cascading Style Sheet is an example of a related file.



The Coding toolbar contains a number of handy tools that help you navigate your code and let you view your code in different ways.

Use Coding Tools to View and Edit RulesShow Code Navigator

Collapse and expand buttons

Code selectionButtons

Code viewingbuttons

Code optionbuttons

Open Documents

Code formattingbuttons


• You cannot move the Toolbar, but you can hide it, using the Toolbars command on the View menu.

• You can view and change page code on the Code View options menu under the View menu.

Use Coding Tools to View and Edit Rules


• You can collapse and expand panels, folders, and styles.

• Collapsing code lets you temporarily hide code between two different sections of code.



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

• As you type code, Dreamweaver will recognize the tag name and offer you choices to complete the tag.

• You can add your own code hints to the list using JavaScript.




Using code hints

As you begin typing code,the shortcut menu appears whenDreamweaver recognizesthe code

Double-click from the list to complete your tag


You can move an embedded style to an external style sheet or an inline style.


Moving the embedded small_text rule to the external style sheet file

Move CSS Rules command

© 2011 delmar, cengage learning chapter 3 working with text and cascading style sheets

Documents

delmar cengage learningwhen

delmar cengage learningan

delmar cengage learningcss

delmar cengage learningyou

delmar cengage learningcode

definition lists

bulleted lists

numbered lists