1. Cascading Style Sheets Robin Burke ECT 360

2. Outline Midterm CSS CSS selection Positioning SVG Final project

3. Midterm 2/2 5:45 pm open book

4. What is a style? An association between a set of display properties a logical unit of document content Not document content Some exceptions numbered lists, captions, etc. CSS originated for adding style to HTML documents

5. Benefit HTML goes back to defining structure Layout and display decisions encoded in the stylesheet Designer can easily change page format without affecting HTML

6. Syntax of CSS selector { attribute:value; } Example h1 { font-color:blue; } Multiple attribute/values pairs possible

7. XHTML example

8. CSS in XML XML is a data-interchange language not intended for display CSS can be used must provide all display information

9. CSS in XML, cont'd HTML distinguishes in-line vs block elements vs crucial for layout XML has no such distinction

10. Display attribute block display content in a separate chunk in-line display content as part of the parent element list-item display content as part of a list none hide content

11. Inheritance Elements inherit their styles setting a style for the "body" element changes the whole document same true for parent elements in XML

12. Embedded style style is declared within a given XML document plus style information centralized minus can't be reused on other documents no standardized way to do this

13. External a separate document "style sheet" is used documents link to the style sheet plus style can be shared across documents minus another document to manage & distribute

14. Stylesheet linking Processing instruction information for the rendering application not part of the document content Syntax

15. Examples external style

16. Lists can choose different kinds of bullets can control nesting behavior Example

17. CSS Rules: Selectors any element name element with particular attribute foo[bar="baz"]  not implemented in IE 6.0 element relationships a b a > b a + b designer-defined classes

18. CSS Pseudo-elements Pseudo-elements a class name that is pre-defined but isn't a tag Example first-line first-letter Also not implemented in IE 6.0

19. Examples section section-number {font-weight: bold; } section[type="night"] { color: blue; } instructor:first-letter { font-size:large; color: red; }

20. CSS Classes and Ids A class is a user-defined name identifies certain elements for styling in document, in stylesheet, foo.bar ID must be unique in document use for identify a single element to have a particular style #id

21. Examples #me { font-weight: bold; } section.day { color: red; } section.night { color: blue; }

22. Alignment and positioning padding border margin Block-level element

23. Layering Boxes can overlap each other transparent regions will show through layering negative margin does this Boxes can be positioned absolutely also causes layering position: absolute specific position on page

24. Example

25. Break

26. SVG Scalable Vector Graphics Graphics graphical display of all sorts even UI Vector as opposed to "raster" Scalable important for multi-platform

27. SVG XML application Based on "paint/canvas" model A graphic is a set of painting operations layered on top of each other

28. Viewing SVG Browser plug-in Adobe (best) Corel Drawing tools CorelDraw Adobe Illustrator

29. Basic tools text line rect circle ellipse path

30. Attributes x, y start position fill the color of the contents stroke the color of the line / edge many others

31. Simple example a box containing text <rect fill="blue" stroke="black" stroke-width="5" x="0" y="0" width="475" height="75"/> <text x="10" y="20" fill="white" font-size="18"> Hello world

32. A more complex example course logo

33. HTML embedding

34. Scalability All images are pixels rasterization When are pixels created? jpg, gif, png, etc. at creation time svg at display time Benefits no loss of clarity at high scale smaller files esp. for simple drawings

35. Example scaling JPEG vs SVG

36. Path a way to represent complex shapes straight line curved

37. Example ducks

38. Abstract path A path need not be drawn Can be used to arrange other elements esp. text

39. Path example course logo with textPath

40. Grouping and transforming g element is used to group elements Reasons apply an attribute to all define a new coordinate system transform the group

41. Transform examples Coordinate shift Skew

42. Combining CSS and SVG SVG elements can have CSS styles applied Internal or external style Familiar properties color, font-family, etc. also SVG specific fill, stroke, fill-opacity, etc.

43. CSS example course logo internal course logo external

44. Linking With images clickable image maps But image map separate from image

45. Linking, cont'd A element as in HTML but based on XLink standard Example Clicking in the rectangle goes to URL

46. Linking example course logo with link

47. Filters Graphical effects created by filters Can be applied under SVG control A complex topic Filter effects blur lighting compositing blending convolution noise, etc.

48. Filter example course logo with specular effect Steps get the silhouette of the image and blur it offset blur to create shadow apply lighting to blur to get highlight trim highlights to fit image add highlight back to original image combine with shadow

49. Scripting SVG graphics can be scripted using JavaScript / ECMAScript Same techniques as used in HTML event handling via onclick, onmouseover, ec. Difference now interacting with SVG DOM not HTML DOM

50. Scripting examples course logo with roll-over mines

51. Animation SVG also supports animation uses some ideas from SMIL

52. Animation example course logo spinning

53. Final project XML application your choice should have 50 objects Schema Transformations full listing summary SVG Display controlled by CSS

54. Final project, cont'd

55. Milestones 2/6 team domain 2/23 schema draft document draft 3/15 final presentation

56. Next week Midterm open book, notes covers XML syntax validation CSS SVG