COP 3813 Intro to Internet Computing

1
COP 3813Intro to Internet Computing

• Prof. Roy Levow
• Lecture 3

2
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

3
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

4

• Style is a quoted string with a series of
  elements of the form
• Element_name value1, value2,
• Separated by
• Example Fig. 6.1

5
Embedded Style Sheet

• Include style sheet information in same page
• ltstyle typetext/cssgt
• Style sheet elements
• lt/stylegt
• Elements define new tags for styles
• name def
• Def has same form as inline style

6
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

7
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

8
Style Inheritance

• Example Fig 6.3
• a.nodec applies only to classes that have
  defined the attribute nodec
• ahover defines changed appearance when mouse is
  over item

9
External Style Sheets

• File with extension .css contains style
  definitions
• Example Fig 6.4
• Document file link to style sheet
• ltlink rel stylesheet type text/css
• href styles.css /gt
• Example Fig 6.5

10
Validation

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

11
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

12
Relative Positioning

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

13
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

14
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

15
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

16
JavaScript Dialogs

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

17
JavaScript Input

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

18
Programming in JavaScript

• Has full programming capability
• Example fig 7.8
• Comparison
• Example fig 7.16