1. Cascading Style Sheets II Robin Burke ECT 270

2. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final project

3. Midterm solution

4. Style aspects of the page that describe its appearance, but not its logical structure Examples fonts colors positioning alignment

5. Cascading Style Sheets Separate style from HTML content Different ways to use in-line embedded linked Linked style most flexible

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

7. Fonts Typical styles for fonts font-family color font-weight background-color font-style font-decoration

8. Colors / Backgrounds Can use colors and backgrounds in more ways than possible in HTML background of any item Can specify color using rgb directly without hex triplet Can control tiling of background

9. Selectors CSS properties and values provide features to be controlled Selectors specify where in the document those styles will be applied

10. Types of selectors element names h1 { font-family: Courier, monospace; } element containment table tr th a { font-decoration: none; } pseudo-classes a:visited { color: blue; } not widely-available >, +, [attribute="value"]

11. Pseudo-elements pseudo-elements selectors ≠ HTML elements still = logical structure Example p:first-letter { color: red; } Not widely available :before, :after

12. Classes Selectors with user-defined behavior usually in conjunction with HTML element Inside HTML element class attribute In CSS selector = element_name.class_name Also.class_name for same class in different elements Example yes/no list items

13. Classes While writing HTML Identify different areas of page requiring different treatment Come up with descriptive class names for each Insert class attribute in HTML elements While writing CSS create styles for each class associate with appropriate class selector

14. Id Also a selector but unique to a single element Example #sidebar { background-color: grey; }

15. Generic blocks How to identify a chunk of content that is not an HTML element already Two options paragraph-like? Use "div" block format word-like? Use "span" in-line format

16. Examples

17. Positioning With CSS, we can control where an element appears Tables for layout not necessary in theory

18. Box model padding border margin Block-level element

19. Positioning Options normal blocks stacked vertically in-line arranged horizontally with wrapping relative calculate where the block should have been and apply offset absolute put block at a precise position float make block independent and wrap other content around it

20. Layering Boxes can overlap each other transparent regions will show through To achieve negative margin absolute or relative position on top

21. Examples layering with margins layering with absolute positioning

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

23. Example Frame

24. Exercise

25. Elements bullet.gif picture7.gif circlesbg.gif confetti.gif

26. Final Project Tourism site Requirements (9 pages total) Home page Order form Slide show Presentation 6/9 Must use CSS Javascript

27. Final Project Milestones 5/12 Proposal: destination / team members 5/26 Last day for design review 6/9 Presentations (8:45 am) Must all be present