COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 3

Cascading Style Sheets  Allow detailed formatting of web pages  Provide separation of structure from presentation (format)  Inline Style –Included directly in XHTML document –More limited capability

Inline Styles  “style” attribute can be added to many tags  Can alter characteristics such as –Font-size, specified in points –Font –Color  Name  Hexadecmimal number #rrbbgg

 Style is a quoted string with a series of elements of the form –Element_name: value1, value2, … –Separated by ;  Example: Fig. 6.1 Fig. 6.1Fig. 6.1

Embedded Style Sheet  Include style sheet information in same page   Style sheet elements </style>  Elements define new tags for styles –name { def } –Def has same form as inline style

Example Embedded Style Sheet  Fig. 6.2 Fig. 6.2 Fig. 6.2  Properties –font-family: font, modifier  Font = arial, times new roman, …  Modifier = sans serif –background color – font-size  Symbolic or numeric pt size  Classes specified as.name

Style Classes and Scope  Style applies to all nested elements  Style is used as new tag  Style class us used to modify an existing tag  Styles of nested components can override styles from ancestors  Styles mas specify a series of tags, applying only in that context “ul ul” applies in a sublist

Style Inheritance  Example Fig – a.nodec applies only to classes that have defined the attribute nodec – a:hover defines changed appearance when mouse is over item

External Style Sheets  File with extension.css contains style definitions –Example Fig  Document file link to style sheet <link rel = “stylesheet” type “text/css” href = “styles.css” /> –Example Fig 6.5 Fig 6.5Fig 6.5

Validation  CSS validator at

Positioning Elements  Property position – absolute for position relative to top left corner = (0,0) –Size is often in px, pixels –Relative to top, bottom, left, right –z-index specifies overlay order for overlapping items  1 is lowest  Example Fig 6.8 Fig 6.8Fig 6.8

Relative Positioning  Shift position with position: relative  span tag specifies range of application of a style  Example Fig 6.9 Fig 6.9Fig 6.9

Other Features  Backgrounds –Fig 6.8 Fig 6.8Fig 6.8  Element dimensions –Fig  Floating elements and text flow –Fig 6.10 Fig 6.10Fig 6.10  Borders –Fig 6.11, Fig 6.12 Fig 6.11Fig 6.12Fig 6.11Fig 6.12

User Style Sheets  Can override defaults and/or author styles  In IE set Accessability | Format documents using my style sheet –Example fig 6.16, 6.17,

JavaScript  Scripting languages are interpreted from source code  Based on Java  Object-oriented  Can be embedded in web pages  Examples fig 7.1, 7.2, 7.3 fig fig

JavaScript Dialogs  Can open various dialog windows  Use appropriate class  Java strings support usual C-style \ excape sequences  Example

JavaScript Input  Can open input window and retrieve input  Example fig

Programming in JavaScript  Has full programming capability –Example fig  Comparison Example fig