1 / 36

Web Pages

Web Pages. Week 10. CSS. Next week: CSS – Part 2. CSS. CSS = Cascading Style Sheets. Add style to web documents. fonts, colors, spacing, size, links. CSS. May be in the webpage or in a “Master List”. CSS = Cascading Style Sheets. Separates the style and the layout of a web page.

lara
Download Presentation

Web Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. CSS May be in the webpage or in a “Master List” 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

  4. CSS A “Master List” allows the Style to Cascade throughout the web pages. 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

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

  6. <font size=“1…7”> Hello Hello Hello Hello Hello Hello Hello • Greater control

  7. Greater control CSS <font size=“1…7”> Hello

  8. Greater control CSS <font size=“1…7”> Borders Padding Margin Etc… 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” )

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

  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 Rule Selector { property: value; } DECLARATION HTML, Class or ID

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

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

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

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

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

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

  19. Basic Syntax of a CSS Rule • CSS Rules may be: • Inline • Embedded • External

  20. Basic Syntax of a CSS Rule • CSS Rules may be: • Inline HTML <h1> <font color=“red”>My Dog Fido</font></h1> CSS <h1 style=“color: red;”> My dog Fido</h1>

  21. Basic Syntax of a CSS Rule • CSS Rules may be: • Inline HTML <h1> <font color=“red”>My Dog Fido</font></h1> CSS <h1 style=“color: red;”> My dog Fido</h1> CSS <h1 style=“color: red; font-size: 20px;”> My dog Fido</h1>

  22. Basic Syntax of a CSS Rule • CSS Rules may be: • Inline • Embedded

  23. Basic Syntax of a CSS Rule <html> <head> <title> My web site </title> Style Info Here! </head> <body> <h1> <font color=“red”>My Dog Fido</font></h1> </body> </html>

  24. Basic Syntax of a CSS Rule <html> <head> <title> My web site </title> <style type=“text/css”> h1 {color: red; font-size: 20px; background-color: blue;} </style> </head> <body> <h1> <font color=“red”>My Dog Fido</font></h1> </body> </html> <h1>My Dog Fido</h1>

  25. HTML only With embedded CSS <html> <head> <title> My web site </title> </head> <body> <h1> <font color=“red”>Adam</font></h1> <h1> <font color=“red”>Billy</font></h1> <h1> <font color=“red”>Charlie</font></h1> <h1> <font color=“red”>David</font></h1> <h1> <font color=“red”>Edward</font></h1> <h1> <font color=“red”>Frank</font></h1> <h1> <font color=“red”>George</font></h1> </body> </html> <html> <head> <title> My web site </title> <style type = “text/css”> h1 { color: red;} </style> </head> <body> <h1>Adam</h1> <h1>Billy</h1> <h1>Charlie</h1> <h1>David</h1> <h1>Edward</h1> <h1>Frank</h1> <h1>George</h1> </body> </html>

  26. Basic Syntax of a CSS Rule • CSS Rules may be: • Inline • Embedded • External

  27. pets.html <html> <head> <title> My web site </title> <style type=“text/css”> @import url(pets.css) </style> </head> <body> <p>Important people</p> <h1>Adam</h1> <h2>Billy</h2> <h3>Charlie</h3> <h2>David</h2> <h2>Edward</h2> <h3>Frank</h3> <h1>George</h1> </body> </html> pets.css 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; }

  28. Basic Syntax of a CSS Rule • CSS Rules may be: • Inline • Embedded • External Priority

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

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

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

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

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

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

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

  36. CSS Cascading Style Sheets. Class website

More Related