1. Using Styles and Style Sheets for Design
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. Using Cascading Style Sheets
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. Using Styles and Style Sheets
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. Creating and Applying a Custom Style
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. Creating and Applying a Custom Style – cont.
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. Creating and Applying a Custom Style – cont.
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. Using Styles and Style Sheets – Inline Styles
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. Using Styles and Style Sheets – Inline Styles
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. Editing Styles Lesson 2: Modify Embedded 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. Redefining HTML Tags Lesson 2: Modify Embedded Styles
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. Redefining HTML Tags Lesson 2: Modify Embedded Styles
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. Adding Hyperlink Rules to a CSS Style Sheet
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. Adding Hyperlink Rules to a CSS Style Sheet
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. CSS Styles Panel – All vs. Current
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. Understanding CSS3 Features
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) 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. Media Queries and Adaptive Websites
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. Validating for CSS3 Standards
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. Adobe BrowserLab Lesson 3: Use CSS3 and Media Queries
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. The Order of Precedence
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. The Order of Precedence
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. Using Tools to Manage Styles
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