COP 3813 Intro to Internet Computing

COP 3813Intro 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

Embedded Style Sheet • Include style sheet information in same page • <style type=“text/css”> 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 • 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 6.3 • 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 6.4 • Document file link to style sheet <link rel = “stylesheet” type “text/css” href = “styles.css” /> • Example Fig 6.5

Validation • CSS validator at http://jigsaw.w3.ofg/css-validator

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

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

Other Features • Backgrounds • Fig 6.8 • Element dimensions • Fig 6.9 • Floating elements and text flow • Fig 6.10 • Borders • Fig 6.11, Fig 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, 6.20

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

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

JavaScript Input • Can open input window and retrieve input • Example fig 7.6

Programming in JavaScript • Has full programming capability • Example fig 7.8 • Comparison Example fig 7.16

COP 3813 Intro to Internet Computing