1. Cascading Style Sheets Robin Burke ECT 270

2. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes classes, ids div and span

3. Midterm 10/20 5:45 pm closed-book HTML/CSS handout distributed

4. Group exercise Part A

5. The Great Layout Debate Purist W3C Pragmatist web designers

6. A solution A separate standard for defining style Styles can be defined at different places document site local device or client user preference

7. What is a style? An association between a set of display properties a logical unit of HTML content Not document content Some exceptions numbered lists, captions, etc.

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

9. Cascading Author User Client Also possible to label styles as "important"

10. Inheritance Elements inherit their styles setting a style for the "body" element changes the whole document

11. In-line styles part of individual tags plus benefits of new CSS attributes style declared where it is used minus doesn't separate content from display global changes not simplified

12. Embedded style style is declared within a given page plus style information centralized minus can't be reused on other pages

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

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

15. Examples in-line style embedded style linked style

16. CSS Rules: Fonts Fonts are very complex platform-specific copyrighted different standards Multi-dimensional size weight style ornament family

17. Font families Categories serif sans-serif monospace cursive Specific fonts Times Roman Arial Courier

18. font-family styles Best practice PC font, Mac font, generic font; Example font-family: Arial, Helvetica, sans-serif;

19. Font sizes Options Relative Absolute Units in, px, em, pt, pc Examples font-size: larger font-size: 12 pt font-size: 50 px font-size: small

20. Spacing Can control letter and line spacing letter-spacing word-spacing line-height

21. Alignment text-align horizontal alignment like "align" attribute vertical-align like "valign" attribute but more possibilities

22. Other font style choices text-weight controls boldness text-decoration underlining, strike-through text-transform uppercase, lowercase font-variant small-caps font-style italic

23. CSS Rules: Colors What can be colored? text background links Options color names RGB triplets hex or decimal

24. Text and link color color changes the text color example color: rgb(153,102,6) color: #FFEECC links can have state-dependent colors link – unvisited visited – visited active – while being clicked hover – while the cursor is there

25. Link colors Handled via "pseudo-classes" relative to a element a:link a:visited Example a:link { color: red; } a:visited { color: blue; }

26. Link color example a:link { color: red; } a:visited { color: blue; text-decoration: none; } a:active { font-weight: bolder; } a:hover { color: green; }

27. Background color Background of any element can be set not true in HTML

28. Background images limited in HTML either large or tiled With CSS Total control over the background image

29. Example Background options

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

31. CSS Rules: Selectors any html element name element with particular attribute td[align="center"]  not implemented in IE 6.0 element relationships a b a > b a + b designer-defined classes

32. CSS Pseudo-elements Pseudo-elements a class name that is pre-defined but isn't an HTML tag Example first-line first-letter

33. Example table caption { background-color: blue; color: white; } tr td { background-color: yellow; } th:first-letter { font-size:large; color: red; }

34. CSS Classes and Ids A class is a user-defined name identifies certain elements for styling li.yes Another example code in elements ID must be unique in document use for identify a single element to have a particular style #id

35. CSS Blocks What if I have a segment that isn't an HTML element? Examples caption and program listing emphasized text

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

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

38. Examples layering with margins layering with absolute positioning

39. Frames We can get "frame-like" appearance with absolute positioning

40. Example Frame

41. Exercise

42. Elements bullet.gif picture7.gif circlesbg.gif confetti.gif

43. Group exercise Part B

44. Next week Midterm Web design