{\rtf1 \ansi {\colortbl\red0\green0\blue0;\red255\green255\blue255;\red255\green0\blue0;\red0\green255\blue0;\red0\green0\blue255;\red255\green0\blue255;\red255\green255\blue0;\red0\green255\blue255;\red128\green0\blue0;\red0\green128\blue0;\red0\green0\blue128;\red128\green0\blue128;\red128\green128\blue0;\red0\green128\blue128;\red128\green128\blue128;\red192\green192\blue192;\red255\green255\blue255;\red255\green239\blue206;\red255\green255\blue194;\red255\green255\blue208;\red224\green255\blue191;\red224\green255\blue223;\red224\green255\blue255;\red194\green239\blue255;\red224\green241\blue255;\red224\green224\blue255;\red232\green224\blue255;\red241\green224\blue255;\red255\green224\blue255;\red255\green224\blue245;\red255\green224\blue230;\red255\green255\blue255;\red255\green225\blue220;\red255\green225\blue176;\red255\green255\blue127;\red241\green241\blue180;\red194\green255\blue145;\red193\green255\blue213;\red164\green255\blue255;\red161\green226\blue255;\red192\green225\blue255;\red191\green191\blue255;\red210\green191\blue255;\red225\green191\blue255;\red255\green193\blue253;\red255\green192\blue228;\red255\green192\blue206;\red247\green247\blue247;\red255\green192\blue182;\red255\green194\blue129;\red255\green255\blue53;\red241\green241\blue128;\red127\green255\blue127;\red130\green255\blue202;\red127\green255\blue255;\red130\green224\blue255;\red130\green192\blue255;\red159\green159\blue255;\red194\green159\blue255;\red226\green159\blue255;\red255\green159\blue255;\red255\green159\blue207;\red255\green159\blue169;\red239\green239\blue239;\red255\green159\blue159;\red255\green159\blue113;\red255\green255\blue0;\red224\green224\blue116;\red65\green255\blue50;\red66\green255\blue199;\red66\green255\blue255;\red0\green191\blue255;\red82\green145\blue239;\red128\green128\blue255;\red192\green130\blue255;\red224\green129\blue255;\red255\green127\blue255;\red255\green130\blue194;\red255\green130\blue160;\red225\green225\blue225;\red255\green128\blue128;\red255\green129\blue65;\red255\green225\blue24;\red225\green225\blue64;\red0\green255\blue0;\red0\green255\blue178;\red0\green255\blue255;\red0\green161\blue224;\red33\green129\blue255;\red97\green129\blue255;\red161\green96\blue255;\red192\green98\blue255;\red255\green95\blue255;\red255\green96\blue175;\red255\green96\blue136;\red210\green210\blue210;\red255\green64\blue64;\red255\green66\blue30;\red255\green191\blue24;\red225\green225\blue0;\red0\green225\blue0;\red0\green225\blue173;\red0\green224\blue224;\red0\green130\blue191;\red0\green128\blue255;\red65\green129\blue255;\red130\green66\blue255;\red193\green64\blue255;\red255\green66\blue249;\red255\green64\blue160;\red255\green64\blue112;\red192\green192\blue192;\red255\green31\blue53;\red255\green31\blue16;\red255\green129\blue0;\red191\green191\blue0;\red0\green194\blue0;\red0\green193\blue150;\red0\green193\blue194;\red65\green129\blue192;\red0\green98\blue225;\red65\green65\blue255;\red66\green0\blue255;\red194\green0\blue255;\red255\green34\blue255;\red245\green43\blue151;\red255\green34\blue89;\red178\green178\blue178;\red224\green31\blue37;\red225\green32\blue0;\red226\green98\blue0;\red161\green161\blue0;\red0\green160\blue0;\red0\green159\blue130;\red63\green128\blue128;\red0\green96\blue160;\red0\green65\blue194;\red0\green33\blue191;\red65\green0\blue194;\red129\green0\blue255;\red255\green0\blue255;\red255\green0\blue128;\red255\green0\blue65;\red162\green162\blue162;\red194\green0\blue0;\red255\green0\blue0;\red191\green65\blue0;\red128\green128\blue63;\red63\green128\blue63;\red0\green130\blue80;\red0\green96\blue98;\red0\green64\blue128;\red0\green31\blue226;\red64\green64\blue194;\red64\green0\blue162;\red96\green0\blue161;\red224\green0\blue224;\red223\green0\blue127;\red194\green0\blue65;\red143\green143\blue143;\red160\green0\blue0;\red225\green0\blue0;\red161\green63\blue0;\red98\green98\blue0;\red0\green96\blue0;\red0\green96\blue60;\red0\green64\blue65;\red0\green47\blue128;\red0\green0\blue255;\red32\green32\blue160;\red34\green0\blue161;\red64\green0\blue128;\red161\green0\blue159;\red192\green0\blue127;\red159\green0\blue15;\red128\green128\blue128;\red96\green0\blue0;\red194\green18\blue18;\red130\green66\blue0;\red66\green66\blue0;\red0\green66\blue0;\red0\green64\blue35;\red0\green50\blue63;\red0\green32\blue96;\red0\green32\blue194;\red34\green34\blue192;\red0\green0\blue128;\red31\green0\blue127;\red128\green0\blue128;\red130\green0\blue64;\red128\green0\blue0;\red95\green95\blue95;\red64\green0\blue0;\red161\green31\blue18;\red96\green66\blue0;\red33\green33\blue0;\red0\green33\blue0;\red0\green32\blue31;\red0\green32\blue65;\red0\green32\blue79;\red0\green0\blue224;\red0\green0\blue161;\red0\green0\blue97;\red31\green0\blue98;\red64\green0\blue95;\red98\green0\blue66;\red98\green0\blue18;\red79\green79\blue79;\red208\green177\blue161;\red224\green161\blue117;\red210\green176\blue106;\red192\green194\blue124;\red130\green193\blue104;\red129\green192\blue151;\red127\green194\blue188;\red113\green178\blue207;\red177\green177\blue210;\red159\green159\blue224;\red192\green161\blue224;\red226\green159\blue222;\red239\green145\blue235;\red226\green159\blue200;\red241\green143\blue188;\red47\green47\blue47;\red127\green96\blue79;\red161\green98\blue82;\red128\green98\blue16;\red130\green130\blue63;\red63\green98\blue31;\red60\green97\blue62;\red55\green96\blue94;\red16\green65\blue96;\red66\green66\blue130;\red98\green96\blue161;\red98\green65\blue129;\red96\green49\blue129;\red96\green33\blue98;\red98\green33\blue82;\red129\green63\blue98;\red0\green0\blue0;}{\fonttbl{\f0\froman Tms Rmn;}{\f1\fswiss Helv;}{\f2\fmodern Courier;}{\f5\fswiss \cpg1252 Arial;}{\f6\froman \cpg1252 Symbol;}}\margl1440 \margr1080 \margt1440 \margb1440 \sectd \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs28 \cf0 Web Development with Cascading Style Sheets \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \plain \b \f5 \fs24 \cf0 Course specifications \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Course number: 077 930 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Software version number: \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Course length: 1 to 2 days \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \plain \b \f5 \fs24 \cf0 Hardware/software required to run this course \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 To run this course, you will need: \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li720 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 At least 16 MB RAM (32 MB strongly recommended). \par \pard \li720 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 80 MB free hard-disk space if you don't already have a browser. \par \pard \li720 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 A 486 or faster processor (Pentium or faster recommended). \par \pard \li720 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 An 800 x 600 or higher resolution monitor set to a minimum of 256 colors. If your monitor doesn't support 256 colors, graphics and text will not display properly. For best image quality, we recommend setting monitors to High Color (16-bit). \par \pard \li720 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 A working connection to the Internet (recommended). \par \pard \li720 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Windows 95 or Windows 98 installed according to the software documentation. \par \pard \li720 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 For Macintosh users, Internet Explorer 4.5 or later and Netscape Navigator 4.5 or later. \par \pard \li720 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 For Windows users, Internet Explorer 4.01 (Service Pack 1), or version 5.0 or later, and Netscape Navigator 4.5 or later. \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \plain \b \f5 \fs24 \cf0 Course description \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Overview: \plain \f5 \fs20 \cf0 This course is designed for students who want to learn how to use Cascading Style Sheets (CSS) to develop and design Web sites. Students will learn how to use all the features of the CSS-1 specification, and a few features of CSS-2. Students will explore browser workarounds and sound development principles along the way. Upon completion of this course, students will be able to identify style sheets of various types, customize styles, apply positioning properties, control background appearance, and create styles that break down gracefully \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Prerequisites: \plain \f5 \fs20 \cf0 This course is designed for the student who is a savvy computer user, is comfortable using the Internet, and is experienced with HTML. We do not provide basic computer, Internet, or HTML concepts in this book. A student who isn't familiar with basic computer terminology, or who hasn't used the Internet or HTML will probably want to first take the following courses: \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f6 \fs20 \cf0 \'b7\tab \plain \i \f5 \fs20 \cf0 Windows 95/98/NT: Introduction \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f6 \fs20 \cf0 \'b7\tab \plain \i \f5 \fs20 \cf0 Introduction to Internet Explorer or Netscape Communicator \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f6 \fs20 \cf0 \'b7\tab \plain \i \f5 \fs20 \cf0 HTML 4.0: Level 1 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f6 \fs20 \cf0 \'b7\tab \plain \i \f5 \fs20 \cf0 HTML 4.0: Level 2 (optional) \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Delivery method: \plain \f5 \fs20 \cf0 Instructor-led, group-paced, classroom-delivery learning model with structured hands-on activities. \page \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \plain \b \f5 \fs28 \cf0 Web Development with Cascading Style Sheets \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \plain \b \f5 \fs24 \cf0 Performance-based objectives \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Lesson objectives help students become comfortable with the course, and also provide a means to evaluate learning. Upon successful completion of this course, students will be able to: \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Identify style sheets of various types, understand the advantages and risks of designing with style sheets, and apply correct style sheet syntax. \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Apply CLASS and ID selectors to customize styles, use the DIV and SPAN elements to construct styles, and create an external style sheet and linking documents to it. \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Understand the rules of the cascade, and create cascading styles. \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Style text with typographical properties, including aligning and indenting text, controlling the spacing of lines and characters modifying other text characteristics; declare specific and generic fonts size fonts with various methods; and create variations of font styles. \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Apply text and background colors with a variety of methods and other background techniques, like controlling background tiling and position. \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Control the margins, borders, and padding of page elements, and create floating elements and list styles. \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Apply position properties to control page layout by absolute and relative coordinates, and control the width, overflow, and layering of page elements. \par \pard \li360 \fi0 \ri360 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Create styles that break down gracefully, such as dynamic hyperlinks and cursor styles, and apply filters and contextual styles. \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \page \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \plain \b \f5 \fs28 \cf0 Web Development with Cascading Style Sheets \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \plain \b \f5 \fs24 \cf0 Course content \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \keepn \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 1: Introduction to Cascading Style Sheets (CSS) \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Designing with Style Sheets \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Style Sheet Syntax \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Creating Simple Rules \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 2: Creating Rules \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Applying Class and ID Selectors \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 The DIV and SPAN Elements \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Linked (External) Style Sheets \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 3: Conflicting Rules: The Cascade \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Rules in Conflict; Cascading Order \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 4: Text and Font Properties \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Typographical Properties \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Font Properties \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 5: Applying Colors and Backgrounds \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Applying Colors \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Background Techniques \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 6: Box Properties \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Formatting with the Box Model \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Borders \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Floating Elements \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Styling Lists \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 7: CSS Positioning \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Positioning Elements Absolutely and Relatively \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Layering Elements with the z-index Property \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \par \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \b \f5 \fs20 \cf0 Lesson 8: Design and Usage Techniques \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Dynamic Link Colors \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Cursor Styles \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Styling Form Elements \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Dynamically Linked Style Sheets \par \pard \li1080 \fi0 \ri0 \sl240 \sb0 \sa0 \plain \f5 \fs20 \cf0 Contextual Selectors \page \pard \li0 \fi0 \ri0 \sl240 \sb0 \sa0 \tx5760 }