Introduction

MIS 5450 Behavioral Layer JavaScript and DOM Structural Layer XHTML Presentation Layer CSS Design Development Process

Benefits  Conserves bandwidth  Reduces design and development time  Reduces updating and maintenance time  Increases interoperability  Increases accessibility

Style Sheets  External  Embedded  Inline

External Style Sheets  Text document, separate from XHMTL pages  Downloaded to user’s cache (saves bandwidth)  Link or import instructions in head of XHMTL page  Two ways: Using link: ○ Importing: ○ Allows multiple sheets to be applied to same document “/styles/mystylesheet.css”;

Embedded Style Sheets  CSS embedded at the beginning of XHTML code for each page  Why? External style sheets used for site, embedded for one specific page (with additional rules) During development  Will be loaded every time (bad for bandwidth)

Inline Style  CSS applied to individual elements in XHTML code  Why? Only for exceptions  Will be loaded every time (bad for bandwidth)  Deprecated in XHTML 1.1.

Basics  Style sheet consists of one or more rules that control the way elements are displayed  CSS rule: Selector (multiple separated by, ) Declaration (multiple separated by ; ) Example: p { color: red; } propertyvalue

Basics  CSS not case-sensitive (except class and id names)  Whitespace for readability body { color: red; background: green; margin: 0; }  Comments : /* this is a comment*/