1. Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 8

2. 2 Today’s Topics CSS (cont’d)

3. 3 Notice Hw2 due midnight tonight Hw3 released Midterm on July 12 (next Monday)

4. 4 Midterm Given in the 2 nd -half class next Monday Four types of problems  Short answers Example: Which are the four required elements (tags) that make up the basic structure of an HTML page?  True-False Example:,, and are examples of standalone HTML tags. √ X  Multiple choices Example: Which attribute is required for tag? A)Height B)Align C)Border D)Alt  Code study Example: Given the code of an irregular frame, draw it.

5. 5 Review: Style Rules A CSS rule consists:  Selector HTML element selector Class selector ID selector Pseudo-Classes Pseudo-Elements  Declaration: pairs of properties and values separated with semicolon put quotes around a value if it is multiple words

6. 6 Review: Placing Style Sheets Inline Style Sheets  Using HTML element’s style attribute Internal Style Sheets  Placed in the HTML head element using tag External Style Sheets  Two methods Using element <link rel=“stylesheet” type=“text/css” href=“location_of_stylesheet” Using @import statement + tag @import url(location_of_stylesheet);

7. 7 What can CSS control? Fonts (color, size, caps, font, etc) Background (image, color, tiling properties) Text (spacing, line-height, alignment, decoration, word-spacing) Box properties (border, margin, padding) List properties (image for bullets) Links (visited, hover, active, link) Example: listing1-6.htmllisting1-6.html

8. 8 CSS1 Properties Specification Units  Length Units  Percentage Units  Color Units  URLs Units references Units examples Font Properties  Font Family  Font Style  Font Variant  Font Weight  Font Size  Font Font examples

9. 9 CSS1 Properties Specification (cont’d) Color and Background Properties Color and Background Properties  Color  Background Color  Background Image  Background Repeat  Background Attachment  Background Position  Background Color examples Background examples Text Properties  Word Spacing  Letter Spacing  Text Decoration  Vertical Alignment  Text Transformation  Text Alignment  Text Indentation  Line Height Text examples

10. 10 CSS Formatting Model Each element in CSS is considered to be bounded by a box The content of the element is surrounded by a padding, border, and margin The margin and padding are transparent, but the borders may be given a style and color css-fmt.html

11. 11 CSS1 Properties Specification (cont’d) Border Properties  Top Border Width  Bottom Border Width  Left Border Width  Right Border Width  Top Border  Bottom Border  Left Border  Right Border  Border Width  Border Color  Border Style  Border Border examples

12. 12 CSS1 Properties Specification (cont’d) Margin Properties  Top Margin  Right Margin  Bottom Margin  Left Margin  Margin Margin examples Padding Properties  Top Padding  Right Padding  Bottom Padding  Left Padding  Padding Padding examples

13. 13 CSS1 Properties Specification (cont’d) Classification Properties Classification Properties  Display  Whitespace  List Style Type  List Style Image  List Style Position  List Style List examples

14. 14 More CSS1 stuff Online CSS resources  http://www.w3c.org/Style/CSS http://www.w3c.org/Style/CSS Check W3C’s CSS1 documentW3C’s CSS1 document  A more detailed overview from Dave Raggettdetailed overview  See CNET builder.com’s reference for detailsCNET builder.com’s reference CSS validation service  http://jigsaw.w3.org/css-validator/validator-uri.html http://jigsaw.w3.org/css-validator/validator-uri.html You can point your browser to CSS files to look at what’s going on

15. 15 CSS2 CSS2 is an extension of CSS1  Adds content positioning: absolute (and fixed) vs. relative specify coordinates (relative to top left of box) z-index: for saying what’s on top when things are stacked  Bigger value has higher priority  The clip, overflow, visibility properties

16. 16 CSS2 approach Make each section of the page a separate with an ID Use positioning for ID selectors, background colors, etc (exact control) Only need to include HTML, not formatting information on each page

17. 17 The Position Property Content positioning  Old solution: graphics version of the content CSS2 solution is more efficient  Example: listing2-1.htmllisting2-1.html  1.9K/0.3sec vs. 40K/8sec Absolute positioning & Relative positioning  Example: listing2-3.htmllisting2-3.html More examples at w3school.comw3school.com

18. 18 The Visibility Property Use visibility property to hide element  set the visibility property to hidden Example: visibility.htmlvisibility.html

19. 19 The Overflow Property CSS2 enable customizing the size of the bounding box of any block-level element Overflow content is handled by overflow property visible, hidden, scroll, auto Example: overflow.htmloverflow.html

20. 20 The Clip Property CSS2 permits cropping an image or other element  Example: img { clip: rect(10px, 5px, 10px, 5px);/*top,right,bottom,left*/ } Applied only to absolutely positioned elements Examples:  cliporiginal.html cliporiginal.html  clipcropped.html clipcropped.html

21. 21 CSS Differences between IE and Mozilla Your homework will be evaluated in both IE and Mozilla residing at the Mac Machines in MacLab Different browser may show different effects for the same style sheet Example:  css2.html (open in both IE and Mozilla (NN)) css2.html