1. class four: the box model and positioning

2. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it: Sam & Sally's Cafe

3. Let’s use to format the copyright in the footer. html: © 2014... css: footer span { font-family: KameronRegular, ''Times New Roman'', serif; }

4. , like, doesn’t mean anything. It’s meant to divide up the page into parts. Try it: …

5. the webpage height content width border padding margin

6. header body navigation footer the webpage right column left column right column content

7. #hours { background-color: #66839E; padding:1em; color:#fff; width:12em; }

8. #hours { background-color: #66839E; padding:1em; color:#fff; width:12em; position:relative; }

9. #hours { background-color: #66839E; padding:1em; color:#fff; width:12em; position:relative; top:1em; right:-2.5em; }

10. #hours { background-color: #66839E; padding:1em; color:#fff; width:12em; position:absolute; top:1em; right:-2.5em; }

11. #reservations { background-color: #66839E; padding:1em; color:#fff; width:12em; position:absolute; top:20em; right:-2.5em; }

12. …unless you set position:inherit.

13. footer { font-family: OstrichSansBold, Verdana, Geneva, sans-serif; font-size: 2em; text-align: center; position:fixed; bottom:0; left:0; right:0; }

14. footer { font-family:OstrichSansBold,Arial,Helvetica,sans-serif; font-size:1em; line-height:1.5em; text-align:center; background-color: #66839E; color: #fff; min-width:600px; position:fixed; bottom:0; left:0; right:0; }

15. a relatively positioned element inside a static element uses the window to position itself. a relatively or absolutely positioned element inside a relatively positioned element uses that parent element to position itself.

16. #content { position:relative; background: orange; }

17. #content { position:relative; background: orange; padding:1em 12.5em 1em 1em; clear:both; }

18. body { background-color:#F1F2E4; font-family:KameronRegular, "Times New Roman", serif; width:80%; margin:0 auto; min-width:600px; }

19. lets you wrap text around an element. img { float:left; margin:.5em; width:12em; }

20. let’s practice floating to the right: #img3 { float:right; margin:.5em; width:12em; }

21. nav ul { font-family: OstrichSansBold, Arial, Helvetica, sans-serif; font-size:2em; padding: 0; margin: 0; width: 100%; list-style-type: none; }

22. nav ul li{ line-height: 1.5em; padding-bottom: 1%; float: left; width: 24.95%; text-align: center; }

23. nav ul li a { text-decoration:none; display: block; color: #66839E; }

24. nav ul li a:hover { color: #FFF; background-color: #66839E; }

25. a keyword added to a selector to indicate a specific state. here’s some link-related selectors: :hover :visited :active

26. HTML5shiv (http://code.google.com/p/html5shiv/)http://code.google.com/p/html5shiv/ CSS3 PIE (http://css3pie.com/)http://css3pie.com/ Just download scripts and include on site – will have to reference scripts in HTML or CSS

27. In :

28.  Mozilla Developer Network  Codecademy  HTMLdog  W3schools  LearnStreet