1. Cascading Style Sheets Robin Burke ECT 270

2. Outline CSS properties Fonts Alignment Color CSS selection selectors

3. The Great Layout Debate Purist W3C Pragmatist web designers

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

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

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

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

8. Inheritance Elements inherit their styles setting a style for the "body" element changes the whole document We will ignore the style sheet cascade in this class

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

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

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

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

13. Examples in-line style embedded style linked style

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

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

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

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

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

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

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

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

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

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

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

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

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

27. Example Background options

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

29. CSS Rules: Selectors any html element name element with particular attribute td[align="center"]  not implemented in IE 6.0 element relationships a b b is a child of a a > b b is some descendant of a a + b b follows a (sibling) designer-defined classes

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

31. Midterm What to study Fundamentals client/server interaction how the web works HTML topics Basics Tables Forms CSS not on exam

32. Next week Midterm More CSS