Cascading Style Sheets Dreamweaver Styles Determine how the

Styles Determine how the HTML code will display n Gives designers much more control

Style Sheet n List of Rules – Each Rule has a Selector and a

Syntax of Style Rules n Syntax: – Selector { definition; } n Selector {

Style Rules n h 1, h 2, h 3, h 4 { color: #ff

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

Inline Very similar to regular HTML styles n Applied to each individual instance n

Internal n n n Placed in the <head> of your document Rules are wrapped

External Totally separate from the HTML Document n Can be linked or imported n

Cascading Order Browser default n External style sheet n Internal style sheet (inside the

Methods Redefine HTML tags n Create a new. Class n Advanced Selectors n –

Redefine HTML Use any HTML tag n Override Browser defaults n Make the HTML

. Class Created as needed n You decide the name n You decide the

#ID’s Similar to a class n You create the name n You decide the

Compound Selectors HTML tags and/or other selectors can be combined to target specific areas

Layout n Use <span> tags for inline elements – No break created n Like

Slides: 16

Download presentation

Cascading Style Sheets Dreamweaver

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

Style Sheet n 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 n Syntax: – Selector { definition; } n Selector { attribute: value; } h 1 { font-size: 130%; }

Style Rules n h 1, h 2, h 3, h 4 { color: #ff 3300; font-family: Arial; } n h 1{ } font-size: 160%;

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

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

Internal n n n Placed in the <head> of your document Rules are wrapped in style tags Styles are wrapped in comment markers <style type =“text/css”> <!– H 1 { font-size: 16 px; } --> </style>

External Totally separate from the HTML Document n Can be linked or imported n Referenced in the <head> section n n <link rel=“stylesheet” href=“styles. css”> @import “styles. css” n Can be used by many web pages n

Cascading Order Browser default n External style sheet n Internal style sheet (inside the <head> tag) n Inline style (inside an HTML element) n

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

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

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

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

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

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