2. Pay per Click Advertising Known as PPC Advertiser pay each time a user clicks on the advertiser's ad Cost per click (CPC) is amount the advertiser pays
3. <html> <head> <title>Simple Website</title> <style type=“text/css”> p { color: red; } </style> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>
8. Style sheet <head> <title>Simple Website</title> <style type=“text/css”> p { border:2px solid black; } </style> </head> Made up of one or more style instructions (called rules) Rules describe how an element or group of elements should be displayed.
17. Conflicting styles Why does “em” style override “body” style? How does Browser choose which style to use?
18. Conflicting styles Specificity More specific the selector, the more weight it is given to override conflicting declarations Rule order “last-one-listed wins”
19.
20.
21. Classes Think of it like a club – someone starts a club and by joining you agree to all the rights and responsibilities of the club.
22. <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p class=“green”>This is a demonstration.</p> <p>Business as usual</p> </body> </html>
23. Class is an attribute <element attribute-name="value">Content</element> Just like “src” for image elements: <imgsrc=“peanut-butter.jpg” alt=“Sandwich” />
24. The CSS Rule Select <p> elements that belong to a certain class. Make them green. p.green{ color: green; }
25. <html> <head> <title>Simple Website</title> <style type=“text/css”> p.green{ color: green; } </style> </head> <body> <h1>Welcome</h1> <p class=“green”>This is a demonstration.</p> <p>Business as usual</p> </body> </html>
26. I want my heading to be part of class! <body> <h1 class=“green”>Welcome</h1> <p class=“green”>This is a demonstration.</p> <p>Business as usual</p> </body>
