1. Web Pages Week 10 This week: CSS Next week: CSS – Part 2

2. CSS CSS = Cascading Style Sheets. Add style to web documents fonts, colors, spacing, size, links

3. CSS CSS = Cascading Style Sheets. Separates the style and the layout of a web page. The Style is defined in one place The Layout is defined in the web pages May be in the webpage or in a “Master List”

4. CSS CSS = Cascading Style Sheets. Separates the style and the layout of a web page. The Style is defined in one place The Layout is defined in the web pages A “Master List” allows the Cascade Style to Cascade throughout the web pages.

5. CSS Easier updating & maintenance Why? Coding is reduced Pages are more efficient, require less bandwidth Standardized layout Greater control

6. Hello

7. Greater control CSS Hello

8. Greater control CSS Font Size Number of Pixels Number of Centimeters, Millimeters, Inches Points ( 1/72”) EM ( size of upper case “M”) Ex ( size of a lower case “x” ) Borders Padding Margin Etc…

9. Box Model Width Height Left margin Right margin outer edge Top margin Bottom margin Padding

10. Positioning Static Relative Absolute Fixed Letter Spacing Word Spacing List Style Line Height

11. Pseudo-selectors First Line First Letter Link Hover Visited

12. Basic Syntax of a CSS Rule Selector{ property: Rule HTML, Class or ID DECLARATION value; }

13. Basic Syntax of a CSS Rule Selector{ property: value; } Rule DECLARATION

14. Basic Syntax of a CSS Rule Selector{ property: value; } Rule DECLARATION

15. Basic Syntax of a CSS Rule Selector{ property: value; Rule DECLARATION property: value; property: value; }

16. Basic Syntax of a CSS Rule Selector{ property: value; } Example { font-size: 20px; }h1

17. Basic Syntax of a CSS Rule Selector{ property: value; } Example { font-size: 20px; color: red; } h1

18. Basic Syntax of a CSS Rule Selector{ property: value; } Example { font-size: 20px; color: red; border: 2px solid blue;} h1

19. Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded External

20. Basic Syntax of a CSS Rule CSS Rules may be: I nline HTML My Dog Fido CSS My dog Fido

21. Basic Syntax of a CSS Rule CSS Rules may be: I nline HTML My Dog Fido CSS My dog Fido CSS My dog Fido

22. Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded

23. Basic Syntax of a CSS Rule My web site My Dog Fido Style Info Here!

24. Basic Syntax of a CSS Rule My web site My Dog Fido h1 {color: red; font-size: 20px; background-color: blue;} My Dog Fido ----------------------------------------------------------------------------

25. My web site Adam Billy Charlie David Edward Frank George My web site h1 { color: red;} Adam Billy Charlie David Edward Frank George HTML onlyWith embedded CSS

26. Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded External

27. My web site @import url(pets.css) Important people Adam Billy Charlie David Edward Frank George pets.html h1 { color: red; font-size: 20px; } h2 { color: green; font-size: 30px; } h3 { color: blue; font-size: 50px; } p { color: black; font-size: 10px; background-color: white; border: 5px dotted green; } pets.css

28. Basic Syntax of a CSS Rule CSS Rules may be: I nline Embedded External Priority

29. CSS Shortcuts p { color: red; } p { color: #FF0000; } FF 00 00 F 0 0 p { color: #F00; }

30. CSS Shortcuts My Dog Fido Border width style color Border-right h1 { border-right-width: 5px; border-right-style: dotted; border-right-color: #F00; } h1 { border: 5px dotted red; }

31. CSS Shortcuts My Dog Fido Padding h1 { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } h1 { border: 5px dotted red; } My Dog Fido

32. Padding h1 { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } h1 { padding: 5px 5px 5px 5px; } My Dog Fido CSS ORDER 1.Top 2.Right 3.Bottom 4.Left 2 1 4 3 1234

33. Padding h1 { padding: 10px 5px; } CSS ORDER 1.Top & bottom 2.Right & Left My Dog Fido 2 1 4 3 1&32&4

34. Padding h1 { padding: 5px; } All four sides are equal My Dog Fido 2 1 4 3

35. Quick Review h1 { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } My Dog Fido 2 1 4 3 h1 { padding: 5px 5px 5px 5px; } h1 { padding: 5px 5px; } h1 { padding: 5px; } Separate Declaration Shorthand Declaration Top/bottom right/left All four sides equal

36. CSS Cascading Style Sheets. Class website