1. Cascading Style Sheets Billy Toy wdt102@psu.edu

2. Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties Font properties Border properties Padding properties Margin properties List properties

3. Cascading Style Sheets (Continued) Dimension properties Classification properties Positioning properties

4. CSS: Syntax selector {property: value} p {font-family: “sans serif”} p {font-family: “sans serif”; color: blue} p { font-family: “sans serif”; color: blue; text-align: left }

5. CSS: Syntax (Continued) h1, h2, h3, h4, h5, h6 {color: red} p.left {text-align: left} p.right {text-align: right}.center {text-align: center}.orangeBg {background-color: orange}

6. CSS: Implementation External Style Sheet

7. CSS: Implementation (Continued) Internal Style Sheet

8. CSS: Implementation (Continued) Inline styles

9. CSS: Background properties background-color background-image background-repeat background-position background-attachment

10. CSS: Text properties color letter-spacing text-align text-decoration text-indent text-transform

11. CSS: Font properties font-family font-size font-style font-variant font-weight font (shorthand)

12. CSS: Border properties border-style border-color border-width

13. CSS: Margin properties margin-bottom margin-left margin-right margin-top margin (shorthand)

14. CSS: Padding properties padding-bottom padding-left padding-right padding-top padding (shorthand)

15. CSS: List properties list-style-type (unordered) list-style-type (ordered) list-style-image list-style-position list-style (shorthand)

16. CSS: Dimension properties height and width height and width line-height

17. CSS: Classification properties display float position: relative position: absolute visibility cursor

18. CSS: Positioning properties clip left and top left and top right and bottom right and bottom overflow vertical-align z-index

19. Credit Examples and CSS test editor located at: http://www.w3schools.com/ http://www.w3schools.com/

20. Questions? William D. Toy wdt102@psu.edu wdt102@psu.edu Thank you.