1. Cascading Style Sheets Dreamweaver

2. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more control Gives designers much more control –Over the look of the page –With page layout

3. Style Sheet List of Rules List of Rules –Each Rule has a Selector and a Definition –Each Rule can have one or more Definitions –Each Definition can be applied to one or more selector

4. Syntax of Style Rules Syntax: Syntax: –Selector { definition;} Selector { attribute: value;} Selector { attribute: value;} h1 { font-size: 130%; }

5. Style Rules h1,h2,h3,h4 { color: #ff3300; font-family: Arial; } h1,h2,h3,h4 { color: #ff3300; font-family: Arial; } h1{ font-size: 160%; } h1{ font-size: 160%; }

6. Three Kinds of Styles Inline Inline Internal (Embedded) Internal (Embedded) External (Linked) External (Linked)

7. Inline Very similar to regular HTML styles Very similar to regular HTML styles Applied to each individual instance Applied to each individual instance content</style> Must be hand coded in Dreamweaver except with layers for positioning. Must be hand coded in Dreamweaver except with layers for positioning.

8. Internal Placed in the of your document Placed in the of your document Rules are wrapped in style tags Rules are wrapped in style tags Styles are wrapped in comment markers Styles are wrapped in comment markers <!– H1 { font-size: 16px; } --> </style>

9. External Totally separate from the HTML Document Totally separate from the HTML Document Can be linked or imported Can be linked or imported Referenced in the section Referenced in the section @import “styles.css” @import “styles.css” Can be used by many web pages Can be used by many web pages

10. Cascading Order Browser default Browser default External style sheet External style sheet Internal style sheet (inside the tag) Internal style sheet (inside the tag) Inline style (inside an HTML element) Inline style (inside an HTML element)

11. Methods Redefine HTML tags Redefine HTML tags Create a new.Class Create a new.Class Advanced Selectors Advanced Selectors –Multiple tags –#ID’s

12. Redefine HTML Use any HTML tag Use any HTML tag Override Browser defaults Override Browser defaults Make the HTML item look the way you want Make the HTML item look the way you want Make all of the same tags look alike Make all of the same tags look alike

13. .Class Created as needed Created as needed You decide the name You decide the name You decide the rules You decide the rules Can be applied to sections of a page Can be applied to sections of a page Can be used multiple times on a page Can be used multiple times on a page

14. #ID’s Similar to a class Similar to a class You create the name You create the name You decide the rules You decide the rules Can only be used once per page Can only be used once per page Layers use ID selectors Layers use ID selectors

15. Compound Selectors HTML tags and/or other selectors can be combined to target specific areas HTML tags and/or other selectors can be combined to target specific areas Allows different look of the same tags in different areas of the page Allows different look of the same tags in different areas of the page

16. Layout Use tags for inline elements Use tags for inline elements –No break created Like a wrapper for an element or section of text. Like a wrapper for an element or section of text. Use tags for block elements Use tags for block elements –Create whitespace like a paragraph –Pulls content out of the page flow