Pres

356 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
356
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Font-family: serif;
  • Pres

    1. 1. Building and Marketing Websites<br />
    2. 2. Pay per Click Advertising<br />Known as PPC<br />Advertiser pay each time a user clicks on the advertiser's ad<br />Cost per click (CPC) is amount the advertiser pays<br />
    3. 3. <html><br /><head><br /><title>Simple Website</title> <br /><style type=“text/css”><br /> p { color: red; }<br /> </style><br /> </head><br /><body><br /><h1>Welcome</h1><br /><p>This is a demonstration.</p><br /> </body><br /></html><br />
    4. 4. Body elements<br /><h1> … </h1><br /><p> … </p><br /><ol> … </ol><br /><ul> … </ul><br /><strong> … </strong><br /><em> … </em><br /><imgsrc=“…” /><br /><!-- Comment --><br />
    5. 5. CSS<br />
    6. 6. HTML describes the content in a Web page<br />CSS describes how you want that content to look<br />
    7. 7. HTML for Structure<br />CSS for Presentation<br />
    8. 8. Style sheet<br /><head><br /> <title>Simple Website</title><br /><style type=“text/css”><br />p { border:2px solid black; }<br /></style> <br /></head><br />Made up of one or more style instructions (called rules) <br />Rules describe how an element or group of elements should be displayed.<br />
    9. 9. Style sheet rules<br />
    10. 10. Structure<br />
    11. 11. Terms to describe structure<br />Parent<br />Child<br />Sibling<br />
    12. 12. Inheritance<br />Elements pass down certain style properties to the elements they contain<br />
    13. 13. Inheritance<br />In general, properties related to the styling of text—font size, color, style, etc.—are passed down.<br />
    14. 14.
    15. 15.
    16. 16. Overriding Inheritance<br />
    17. 17. Conflicting styles<br />Why does “em” style override “body” style?<br />How does Browser choose which style to use?<br />
    18. 18. Conflicting styles<br />Specificity<br />More specific the selector, the more weight it is given to override conflicting declarations<br />Rule order<br />“last-one-listed wins”<br />
    19. 19. How do I style certain elements only?<br /><ul><li>Some paragraphs green
    20. 20. Some headings orange </li></li></ul><li>Classes<br />Used to classify elements into a conceptual group.<br />
    21. 21. Classes<br />Think of it like a club – someone starts a club and by joining you agree to all the rights and responsibilities of the club.<br />
    22. 22. <html><br /><head><br /><title>Simple Website</title> <br /> </head><br /><body><br /><h1>Welcome</h1><br /><p class=“green”>This is a demonstration.</p><br /> <p>Business as usual</p><br /> </body><br /></html><br />
    23. 23. Class is an attribute<br /><element attribute-name="value">Content</element><br />Just like “src” for image elements:<br /><imgsrc=“peanut-butter.jpg” alt=“Sandwich” /><br />
    24. 24. The CSS Rule<br />Select <p> elements that belong to a certain class.<br />Make them green.<br />p.green{<br />color: green;<br />}<br />
    25. 25. <html><br /><head><br /><title>Simple Website</title> <br /><style type=“text/css”><br />p.green{ color: green; }<br /> </style><br /> </head><br /><body><br /><h1>Welcome</h1><br /><p class=“green”>This is a demonstration.</p><br /> <p>Business as usual</p><br /> </body><br /></html><br />
    26. 26. I want my heading to be part of class! <br /> <body><br /><h1 class=“green”>Welcome</h1><br /><p class=“green”>This is a demonstration.</p><br /> <p>Business as usual</p><br /> </body><br />
    27. 27. How does the CSS rule change?<br />
    28. 28. <html><br /><head><br /><title>Simple Website</title> <br /><style type=“text/css”><br />p.green, h1.green { color: green; }<br /> </style><br /> </head><br /><body><br /><h1>Welcome</h1><br /><p class=“green”>This is a demonstration.</p><br /> <p>Business as usual</p><br /> </body><br /></html><br />
    29. 29. If you want all elements that are in the green class to have a style, then you can just write your rule like this:<br />.green{<br />color: green;<br />}<br />
    30. 30. <html><br /><head><br /><title>Simple Website</title> <br /><style type=“text/css”><br />.green { color: green; }<br /> </style><br /> </head><br /><body><br /><h1>Welcome</h1><br /><p class=“green”>This is a demonstration.</p><br /> <p>Business as usual</p><br /> </body><br /></html><br />

    ×