Introduction to Programming the WWW I

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

2. Today’s Topics • Cascading Style Sheet

3. HTML Forms • HTML Forms are used to select different kinds of user input, defined with <form> tag • Form contains form elements to allow the user to enter information • text fields • textarea fields • drop-down menus • radio buttons • checkboxes, etc • A Web page can contain one or multiple forms • Identified by id or name attribute

4. What is CSS? • CSS stands for Cascading Style Sheets • Styles define extra information about how to display HTML elements • Styles are normally stored in Style Sheets • Multiple style definitions will cascade into one

5. What is CSS? (cont’d) • Incorporated in HTML only at 4.0 • Removes formatting from HTML, leaving it to be a structure/content language • HTML 1.0 – structure tags only • HTML tags were originally designed to define the content of a document • HTML 2.0/3.2 – structure tags mixed with formatting tags • HTML 4.0 + CSS – structure tags only in HTML 4.0 and CSS handles formatting • Two levels of CSS: CSS1 and CSS2 • Why use CSS? Scalability! • CSS Demos: • http://www.w3schools.com/css/demo_default.htm • http://www.csszengarden.com/ (thanks Carl)

6. Some Important Preliminaries • Containment • Examples: containment.html • <div> tag • Block-level tag to group the contained elements together • Example: div-usage.html • <span> tag • Inline version of <div> to group inline elements • Useful to format tag-less styles • Example: span example

7. Creating Your Own Style Rules • A CSS rule consists: • Selector • Declaration: pairs of properties and values • separated with semicolon • put quotes around a value if it is multiple words • Rule examples H1 {font-family : Arial, sans-serif;} P { font-family : “Times new roman", serif; color : red; text-align: left; } • Example: listing1-1.html

8. HTML Element Selectors • Designate style for one or more HTML tags h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center;} • Contextual Selectors • To combine multiple HTML element selectors • E.g: making bold text within paragraphs maroon p b {color : maroon} • Contextual dependencies can be nested further div.warning h1 em { color: green; } • Example: • listing1-4.html

9. Class Selectors • Apply styles to several elements on a page • Class selector begins with a period • E.g: .isgreen {color: green} • Reference the class name in the HTML • E.g: <h1 class=“isgreen”>This will appear green.<h1> • Can also create subclasses for HTML elements: • Can define different styles for a same HTML element • E.g: h1.isblue {color: blue} h1.isred {color: red}

10. ID Selectors • Applies rules to HTML content by ID • Class selector begins with a “#” • E.g: #silverware {color: silver} • Reference the ID in the HTML • E.g: <h1 id=“silverware ”>This will appear silver.<h1> • ID selector enables you to identify an element to be an *unique instance* in a document • Apply an ID selector to only ONE element • Useful in JavaScript

11. Pseudo-Classes • Display the same element differently in various states • Typically used to indicate the state of a link a:link { color: blue } a:visited { color: black } a:active { color: green } a:hover { color: red } • HTML selector and its pseudo separated by “:” • Mix pseudo-classes with regular class • Example: listing1-4-2.html

12. Pseudo-Elements • Allow you to set a style on a subpart of an element • Use case: • The first character of a line p:first-letter { } p.dropcap:first-letter { } • The first line of a paragraph p.greenstart:first-line { } • Example: • Pseudo-element.html

13. CSS Comments • A CSS comment begins with "/*", and ends with "*/" • Example: /* This is a comment */ p{ text-align: center; /* This is another comment */ color: black; font-family: arial }

14. Placing Style Sheets 1 • Inline Style Sheets • Applies to a single element <p style="color : silver">some text goes here.</p> • Discouraged by the W3C • Example: listing1-7.html

15. Placing Style Sheets 2 • Internal Style Sheets • Placed in the HTML head element using <style> tag • Set type attribute to “text/css” for <style> tag • Applies to a single page • Example: listing1-4-1.html <head> <style type="text/css"> <!-- h1, h2, h3, h4, h5, h6 { font-family : arial, sans-serif; color : blue; text-align: center; } p b {color : maroon;} .isgreen {color : green;} --> </style> </head>

16. External Style Sheets • Store style rules in an external plain text file (CSS file) • Reference the external file using a <link> tag in HTML head element • Syntax <link rel=“stylesheet” type=“text/css” href=“location_of_stylesheet”> • The alternative: using @import declaration in <style> tag • Syntax: <style> @import url(location_of_stylesheet) </style> • A single HTML page can refer to multiple external style sheets • Great for consistent styling on large sites • Example: listing1-5.html using myfirststyle.css

17. Style Cascading Order • What style will be used when there is more than one style specified for an HTML element? Inline Style (inside HTML element) Internal Style Sheet (inside the <head> tag) External Style Sheet Browser default High Priority Low Priority

18. 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.html

19. 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 CSS1 Properties Specification

20. 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 CSS1 Properties Specification (cont’d)

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

22. 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 CSS1 Properties Specification (cont’d)

23. 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 CSS1 Properties Specification (cont’d)

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

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

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

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

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

29. The Visibility Property • Use visibility property to hide element • set the visibility property to hidden • Example: visibility.html

30. 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.html

31. 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 • clipcropped.html

32. 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))