1. COP 3813 Intro 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 Fig. 6.1Fig. 6.1

5. 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

6. 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

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 6.3 – a.nodec applies only to classes that have defined the attribute nodec – a:hover defines changed appearance when mouse is over item

9. External Style Sheets  File with extension.css contains style definitions –Example Fig 6.4 6.4  Document file link to style sheet <link rel = “stylesheet” type “text/css” href = “styles.css” /> –Example Fig 6.5 Fig 6.5Fig 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 Fig 6.8Fig 6.8

12. 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

13. Other Features  Backgrounds –Fig 6.8 Fig 6.8Fig 6.8  Element dimensions –Fig 6.9 6.9  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

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 6.166.176.206.166.176.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 fig 7.17.27.3fig 7.17.27.3

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

17. JavaScript Input  Can open input window and retrieve input  Example fig 7.6 7.6

18. Programming in JavaScript  Has full programming capability –Example fig 7.8 7.8  Comparison Example fig 7.16 7.16