1. © 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design

2. © 2011 Delmar Cengage Learning 1.Create and use embedded styles 2.Modify embedded styles 3.Work with external style sheets 4.Work with conflicting styles Chapter 8 Lessons

3. © 2011 Delmar Cengage Learning Using Styles and Style Sheets for Design Separate or external file sheets allow you to change the appearance of every page to which the style sheet is attached. A type of rule that affects all headings in a website is called a global CSS rule.

4. © 2011 Delmar Cengage Learning Using Styles and Style Sheets for Design Embedded styles are internal styles whose code is located within the head section of the HTML code. Embedded styles are used in Dreamweaver CSS predesigned layouts to format the div tags on each page.

5. © 2011 Delmar Cengage Learning Tools You’ll Use Using Styles and Style Sheets for Design

6. © 2011 Delmar Cengage Learning Create and Use Embedded Styles An embedded style is a style whose code is embedded in the code of an individual page. The inline style is part of the individual page code, but is written in the body section, rather than the head section.

7. © 2011 Delmar Cengage Learning Create and Use Embedded Styles To create an embedded style, you can use the New CSS Rule button in the CSS Styles panel to open the New CSS Rule dialog box.

8. © 2011 Delmar Cengage Learning Create and Use Embedded Styles You can use the New CSS Rule dialog box to create a class style which contains formatting attributes for a web page. After you name the class style, you will define eight different category settings.

9. © 2011 Delmar Cengage Learning Create and Use Embedded Styles CSS Rule Definition for.contact_info style

10. © 2011 Delmar Cengage Learning Modify Embedded Styles Any changes you make to a style are automatically reflected on the page. You can change the definition of an HTML tag by clicking the Tag selector type and redefining the formatting settings.

11. © 2011 Delmar Cengage Learning Modify Embedded Styles The CSS Styles panel has two modes: –The All mode 1.In the All mode, the style sheet rules appear in the top half of the panel 2.When you click on of the rules, the Properties pane list that rule’s properties

12. © 2011 Delmar Cengage Learning Modify Embedded Styles CSS Styles panel in All Mode Contact_info rule selected Switch to All (Document) Mode button All Rules pane Properties pane showing properties for contact_info rule

13. © 2011 Delmar Cengage Learning Modify Embedded Styles –The Current mode 1.The top half of the panel is called the Summary for Selection pane 2.When an object with a style is selected, the Summary for Selection pane displays that style’s properties

14. © 2011 Delmar Cengage Learning Modify Embedded Styles CSS Styles panel in Current Mode Switch to Current Selection Mode button Rules pane Summary for Selection pane Properties pane showing properties For contact_info rule

15. © 2011 Delmar Cengage Learning Modify Embedded Styles The bottom half of the CSS Styles panel is called the Properties pane in either mode. The Rules pane displays the location of the current selected rule in the open document.

16. © 2011 Delmar Cengage Learning Work with External Style Sheets To ensure consistent formatting across all elements of a website, you should use external style sheets. External style sheets can be attached to a page that you have already created.

17. © 2011 Delmar Cengage Learning Work with External Style Sheets Attach External Style Sheet dialog box

18. © 2011 Delmar Cengage Learning Work with External Style Sheets You can use an external style sheet to create rules for all links in a website. You can also create rules for other types of tags using the Compound selector type.

19. © 2011 Delmar Cengage Learning Work with External Style Sheets New CSS Rule dialog box with Compound selector type displayed

20. © 2011 Delmar Cengage Learning Work with External Style Sheets You can make changes to a style sheet by editing the code in the style sheet file rather than through the CSS Styles panel. su_styles.css file after changing the color for the list_heading rule

21. © 2011 Delmar Cengage Learning Work with Conflicting Styles Cascading refers to the way style sheets are ranked in order of precedence as they are applied to page elements. Style sheets originate from three sources: the author, the user, and the user agent.

22. © 2011 Delmar Cengage Learning Work with Conflicting Styles The order of precedence for style sheets. –Find declarations that specify and match the media type being used –Order of importance –Specificity of the selector –Order specified in the code

23. © 2011 Delmar Cengage Learning Work with Conflicting Styles Pseudo class styles refer to styles that determine the appearance of a page element when a certain condition resulting from information external to the HTML source is met. The Browser Compatibility Check feature flags issues on a page.

24. © 2011 Delmar Cengage Learning Using the Browser Compatibility Check Click to add additional browsers for compatibility checking Work with Conflicting Styles

25. © 2011 Delmar Cengage Learning Work with Conflicting Styles The Inspect mode helps you to identify HTML elements and their associated styles. The Disable/Enable CSS feature allows you to disable a rule property and compare the effects of the affected page element without that property.