Working with Text and Cascading Style Sheets Chapter 3 Working with Text and Cascading Style Sheets

Creating Unordered and Ordered Lists 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 Bulleted list styles Style list arrow Choosing a bulleted list style in the List Properties dialog box

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 Numbered list styles Style list arrow Choosing a numbered list style in the List Properties dialog box

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 Ordered list items Creating an ordered list

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 Square style Style list arrow List Properties dialog box

Creating, Applying, and Editing Cascading Style Sheets 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 Class option for Selector Type Rule Definition list arrow New rule name New CSS Rule dialog box

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 Toggle Displaying of CSS Styles button Style Rendering toolbar

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 Select Tag (redefines an HTML element) Type or select 1 Verify that su_styles.css will be the location for the new rule Creating a Tag selector

Adding Rules and Attaching 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 Style sheet name in the Related Files toolbar Embedded rules are embedded in the head content Link to external style sheet Code for embedded rules and a link to an external style sheet

Using Code Tools to View and Edit Rules 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 Clicking either minus sign will collapse the selected code Select the code in lines 8 through 18 (your line numbers may vary slightly) Selecting lines of code on the index page to collapse

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 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 hints

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 Selected code for small_text rule Move CSS Rules command Moving the embedded small_text rule to the external style sheet file

Using Code Tools to View and Edit Rules The embedded small_text rule will move to the su_styles file Moving the embedded style to the external style sheet file