1. CS 200 – Styles (Part 3) Review Classes (styles) Colors Symbols

2. Review – A Style For An Element h1 { font-variant: small-caps; color: teal; font-family: comic sans ms; } Element being styled Blue words are properties Red words are values

3. Review: Classes for an element p.indentfirstword { text-indent:.3in; } p.indentleftside { margin-left:.3in; } p.hangingindent { margin-left:.3in; text-indent: -.3in; } } This paragraph has the first word indented. The second line goes back to the left margin.

4. Review: General classes Championship The championship will be held at … Western Mountain Park 4600 Fairfield Drive.bluelinearound { border: 3px solid blue ; }

5. Know the 3 previous slides for the next quiz Style for an Element Classes for an Element General class

6. Applying a style to a few words: Result Class definition Class applied

8. Color Use names, numbers, or rbg for the font color and the background color h1 { color: mediumvioletred; background-color: papayawhip; } h2 { color: #191970; background-color: #b0c4de; } h3 { color: rgb(102, 238, 51); }

9. Colors by Name – Page 53 See References in Laulima also:

10. Color Codes (See pgs 51-53) Color codes are red green blue. Highest number is 255. 255 0 0 FF 00 00 pure red 0 255 0 0 FF 00 pure green 0 0 255 0 00 FF pure blue h3 { color: #00ff00 }  green font

11. More About Color: Pgs 54-57 Notice the color chart. Quick vote: Which is "brighter"? (see pg. 55) red green blue Read about luminance and contrast. Include sufficient contrast in your color choices in Lab 02.

12. Color References Interactive color display (type word or number, see the color) http://www.sunybroome.edu/~hinton_r/js/changecolorbg.html?bg=willow Interactive tutorial from MERLOT (teachers sharing tutorials) http://www.visibledreams.net/Web/color/color_2.html In Common, there is file with color names. Also, page 53 is a printed list of colors.

13. Summary: 3 Ways to Write Colors h2 { color: lightblue; } Run the words together h2 { color: rgb(173,216,230); } h2 {color: #ADD8E6; } Don't forget the # sign

15. Special Symbols - Examples

16. Symbols All characters have a number that can be expressed in both systems: –decimal (base 10) &# _ _ _ ; –hexadecimal (base 16) &#x _ _ _; Some have HTML names & < > → ← &  

17. Non-break Space (HTML name)   (decimal code)   (hex code) Use when you want extra space between words

18. Lab Time Complete Lab 02 – Adding Styles to a Web Page Homework 02 (Multiple Choice on Laulima) Next Class: –Quiz #2 – about Styles – first 15 minutes Mac Users: (someone asked) TextWrangler (instead of Notepad++)