Cascading Style Sheets Dreamweaver

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

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

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

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%; }

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

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.

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>

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 “styles.css” Can be used by many web pages Can be used by many web pages

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

Layout Use tags for block elements Use tags for block elements –Create whitespace like a paragraph –Pulls content out of the page flow 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. Layers use ID selectors Layers use ID selectors