Chapter 8

1. Chapter 8 Using Styles and Style Sheets for Design

2. Chapter 7 Lessons Introduction • Create and use embedded styles • Modify embedded styles • Use CSS3 and Media Queries • Work with conflicting styles

3. Introduction Using Cascading Style Sheets • Most powerful method to ensure that all elements in a website are formatted consistently • External – Formatting rules kept in a separate file • Every page attached to external style sheet will update when style sheet file is modified • Better practice for formatting code to be in separate external file • Embedded – style code is located within the head section of the HTML code of a web page • Embedded styles do not format website content globally

4. Lesson 1: Create and Use Embedded Styles Using Styles and Style Sheets • Embedded CSS styles • Styles whose code is located in the head section of the HTML code of a Web page • An embedded style overrides an external style • Inline Style • Part of individual page code in body section • Refers to specific instance of Tag, rather than global tag

5. Lesson 1: Create and Use Embedded Styles Creating and Applying a Custom Style • A Custom (or class) Embedded Style contains a combination of formatting attributes that can be applied to a block of text or other page elements • To create a new custom style, use the New CSS Rule dialog box • To specify the new style as an embedded style, Rule Definition location should be “This Document Only” • Custom Embedded Style name begins with a period (.)

6. Lesson 1: Create and Use Embedded Styles Creating and Applying a Custom Style – cont. Rule in CSS Panel – Custom Style with . Class Selector Rule Name Rule Location

7. Lesson 1: Create and Use Embedded Styles Creating and Applying a Custom Style – cont. • To add a Custom Style to a block of text or a page element: • Select the page element or block of text using the Custom Style • Access the HTML Property Inspector or CSS Property Inspector • Select the Custom Style from the Class List Box in the HTML Property Inspector or the Targeted Rule List Box in the CSS Property Inspector

8. Lesson 1: Create and Use Embedded Styles Using Styles and Style Sheets – Inline Styles Rule in CSS Panel – Inline Style with # ID Selector Rule Name Rule Location

9. Lesson 1: Create and Use Embedded Styles Using Styles and Style Sheets – Inline Styles • To add an Inline Style to a page element: • Select the page element using the Inline Style • Access the HTML Property Inspector • Select the Inline Style from the ID List Box

10. Lesson 2: Modify Embedded Styles Editing Styles • Editing a style can be done using various methods: • CSS Properties Inspector • CSS Rule Definition dialog box • Accessed through Edit Rule button in either the CSS Styles Panel or the CSS Property Inspector • CSS Styles Panel Properties Pane • Edit code of Embedded CSS Style found in the Head Section of page HTML Code

11. Lesson 2: Modify Embedded Styles Editing Styles – cont.

12. Lesson 2: Modify Embedded Styles Redefining HTML Tags • When you use the Property inspector to format a web page element, a predefined HTML tag is added to that element • Once you save the rule and apply it, the tags you target will be formatted according to the altered settings you specified

13. Lesson 2: Modify Embedded Styles Redefining HTML Tags • To change the definition of an HTML tag: 1. Specify Tag to redefine HTML element 2. Choose HTML element to redefine 3. Specify where Rule should be saved (embedded or external) 4. Use the CSS Rule Definition dialog box to redefine HTML element

14. Lesson 2: Modify Embedded Styles Adding Hyperlink Rules to a CSS Style Sheet • Compound selectors are used to create styles for a combination of rules • Class, ID, or Tag • Compound rules are also used to style states of a tag • Compound rule can be created to style the way a link looks when you hover over it with your cursor • a:link – unvisited link • a:visited – visited link • a:hover – link when mouse is hover over it

15. Lesson 2: Modify Embedded Styles Adding Hyperlink Rules to a CSS Style Sheet • To create styles for all links using a style sheet: 1. Specify Compound for links 2. Choose link selector from list 3. Specify where Rule should be saved (embedded or external) 4. Use the CSS Rule Definition dialog box to redefine link rule

16. Lesson 2: Modify Embedded Styles CSS Styles Panel – All vs. Current Summary for Selection Pane All Rules Pane Rules Pane Properties Pane Properties Pane

17. Lesson 3: Use CSS3 and Media Queries Understanding CSS3 Features • CSS3 is the latest version of CSS being developed by the World Wide Web Consortium (W3C) • CSS3 introduced improved coding techniques, such as new tags to insert audio and video objects • Examples: • WOFF (Web Open Font Format) fonts: @font-face property allows a browser to access and deliver a specified font • Semantic coding: values such as “small” or “large” instead of pixels for text properties • Rounded Corners of div tags • Tabs and Accordions for navigation

18. Lesson 3: Use CSS3 and Media Queries Media Queries and Adaptive Websites • Media Query are files that specify set parameters for displaying pages on separate devices, such as tablets or smart phones • Media Queries specify a different style sheet for each device: a style sheet for a desktop monitor, a style sheet for a tablet, and a style sheet for a cell phone • Adaptive websites are websites that adjust or modify the page content to fit the user’s needs and device type used to view the site

19. Lesson 3: Use CSS3 and Media Queries Validating for CSS3 Standards • Validate your CSS3 code is compliant with today’s standards before publishing • Utilize free validation service through W3C.org to check style sheets

20. Lesson 3: Use CSS3 and Media Queries Adobe BrowserLab • Online service that you can access through Dreamweaver to test your site with multiple browsers, without needing to have the browser programs installed on your computer • Provides online viewing, as well as diagnostic and comparison tools

21. Lesson 4: Work with Conflicting Styles The Order of Precedence • Cascading refers to the way styles are ranked in order of precedence as they are applied to page elements • Style sheets originate from three sources: • the author, who is the creator of the page and style sheet • the user, or person who is viewing the page • the user agent, the software through which the page is delivered • The first order of precedence is to find declarations that specify and match the media type being used, such as a computer screen

22. Lesson 4: Work with Conflicting Styles The Order of Precedence • The second order of precedence is by importance and origin as follows: • user important declarations • author important declarations • author normal declarations • user normal declarations • user agent declarations • The third order of precedence is by specificity of the selector • The fourth order of precedence is by order specified in the code • Imported, or external style sheets, are considered to be before any internal styles

23. Lesson 4: Work with Conflicting Styles Using Tools to Manage Styles • The Browser Compatibility Check feature flags issues on a page that may present a problem when viewed in a particular browser • Inspect mode helps you to identify HTML elements and their associated styles • Disable/Enable CSS allows you to disable a rule property in Design view so you can compare the effects of the affected page element with and without that property