© 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

© 2011 Delmar Cengage Learning 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 Cascading Style Sheets

© 2011 Delmar Cengage Learning 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. Working with Text and Cascading Style Sheets

© 2011 Delmar Cengage Learning Tools You’ll Use Working with Text and Cascading Style Sheets

© 2011 Delmar Cengage Learning 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

© 2011 Delmar Cengage Learning 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 Create Unordered and Ordered Lists

© 2011 Delmar Cengage Learning 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. Create Unordered and Ordered Lists

© 2011 Delmar Cengage Learning An ordered list is appropriate for a list in which each item must be executed according to its specific order. Tools You’ll Use Create Unordered and Ordered Lists

© 2011 Delmar Cengage Learning Create Unordered and Ordered Lists 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.

© 2011 Delmar Cengage Learning 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

© 2011 Delmar Cengage Learning The external style sheet is a separate file where you can save code. Style sheets are classified by where the code is stored. Create, Apply, and Edit Cascading Style Sheets

© 2011 Delmar Cengage Learning 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) Create, Apply, and Edit Cascading Style Sheets

© 2011 Delmar Cengage Learning Cascading Style Sheet file created in striped_umbrella site root folder Create, Apply, and Edit Cascading Style Sheets

© 2011 Delmar Cengage Learning 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 Create, Apply, and Edit Cascading Style Sheets

© 2011 Delmar Cengage Learning 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. Create, Apply, and Edit Cascading Style Sheets

© 2011 Delmar Cengage Learning 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 Create, Apply, and Edit Cascading Style Sheets

© 2011 Delmar Cengage Learning 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) Create, Apply, and Edit Cascading Style Sheets

© 2011 Delmar Cengage Learning Viewing CSS code Create, Apply, and Edit Cascading Style Sheets SelectorDeclaration PropertyValue

© 2011 Delmar Cengage Learning 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.

© 2011 Delmar Cengage Learning 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. Add Rules and Attach Cascading Style Sheets

© 2011 Delmar Cengage Learning 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. Add Rules and Attach Cascading Style Sheets

© 2011 Delmar Cengage Learning 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 Rules Show Code Navigator Collapse and expand buttons Code selection Buttons Code viewing buttons Code option buttons Open Documents Code formatting buttons

© 2011 Delmar Cengage Learning 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

© 2011 Delmar Cengage Learning You can collapse and expand panels, folders, and styles. Collapsing code lets you temporarily hide code between two different sections of code. Use Coding Tools to View and Edit Rules

© 2011 Delmar Cengage Learning 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. Use Coding Tools to View and Edit Rules

© 2011 Delmar Cengage Learning Use Coding 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

© 2011 Delmar Cengage Learning You can move an embedded style to an external style sheet or an inline style. Use Coding Tools to View and Edit Rules Moving the embedded small_text rule to the external style sheet file Move CSS Rules command