1. Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

2. 2

3. Normal Flow Figure 7.1 Figure 7.2 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

4. float Property 4 h1 { background-color: #A8C682; padding: 5px; color: #000000; } p { font-family: Arial, sans-serif; } #yls { float: right; margin: 0 0 5px 5px; border: solid; } Copyright © 2016 Pearson Education, Inc., Hoboken NJ

5. clear Property The h2 text is displayed in normal flow. clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image. Copyright © 2016 Pearson Education, Inc., Hoboken NJ

6. overflow Property The background does not extend as far as you’d expect. overflow: auto; was applied to the container div. Now the background extends and the h2 text displays AFTER the floated image. overflow: auto; was applied to the container div. Now the background extends and the h2 text displays AFTER the floated image. Copyright © 2016 Pearson Education, Inc., Hoboken NJ

7. Basic Two-Column Layout Copyright © 2016 Pearson Education, Inc., Hoboken NJ

8. Basic Two-Column Layout #wrapper { width: 80%; margin-left: auto; margin-right: auto; background-color: #EAEAEA; } header { background-color: #CCCCFF; } h1 { margin: 0; padding: 10px; } nav { float: left; width: 150px; padding: 10px; } main { margin-left: 160px; padding: 10px; background-color: #FFFFFF; } footer { text-align: center; font-style: italic; background-color: #CCCCFF; } Copyright © 2016 Pearson Education, Inc., Hoboken NJ

9. 9

10. display Property 10 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

11. 11 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

12. CSS Pseudo-classes a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;} a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;} Copyright © 2016 Pearson Education, Inc., Hoboken NJ

13. CSS Pseudo-classes 13 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

14. 14 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

15. 15 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

16. Relative Positioning 16 p { position: relative; left: 30px; font-family: Arial, sans-serif; } p { position: relative; left: 30px; font-family: Arial, sans-serif; } Copyright © 2016 Pearson Education, Inc., Hoboken NJ

17. Absolute Positioning 17 p { position: absolute; left: 200px; top: 100px; font-family: Arial, sans-serif; width: 300px; } p { position: absolute; left: 200px; top: 100px; font-family: Arial, sans-serif; width: 300px; } Copyright © 2016 Pearson Education, Inc., Hoboken NJ

18. 18 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

19. CSS Debugging Tips 19 Copyright © 2016 Pearson Education, Inc., Hoboken NJ

20. Summary 20 Copyright © 2016 Pearson Education, Inc., Hoboken NJ