5. 3) Create CSS page formats content - fonts, colors formats elements - layout

6. 3a) Link CSS to main.html multiple screen>(folder) stylesheet or window>CSS style, click "link" in lower right of CSS styles window box open and click "browse" to find the stylesheet and click "ok"

7. 4) CSS comment categories /* reset */ /* global */ /* containers */ /* images */ /* text-elements */

8. 5) /* global */ html { } body { }

9. 5) /* global */ html { } body { background-color: #C2822f;}

10. 6) Create wrapper elements #wrapper { width: 900px; margin: 0px auto; background-color: #FFF; }

11. Next: to create a border around the wrapper and keep everything centered you must create another <div> </div> tag on the main.html page around the wrapper <div>

13. 8) Copy #wrapper CSS elements and paste on line below, but change #wrapper to #outer and width: 960; #outer { width: 960px; margin: 0px auto; background color: #FFF; }

14. 9) Logo element #logo {padding-top: 30px; }

15. 10) social-media-icons #social-media-icons {float: right; }

16. 10) #!ck #social-media-icons {float: right; }

17. 11) Add to logo element: #logo { margin: 30px 0px; float: left; }

18. 12) topnav elements: #topnav { clear: both; }

19. 12) reference a specific aspect of social-media-icons below #social-media-icons : #social-media-icons ul li { display: inline; }

20. 12) create margin spacing to lower social-media-icons on the page #social-media-icons ul { padding-top: 30px; }

21. #social-media-icons { float: right; } #social-media-icons ul li { display: inline; } #social-media-icons ul { padding: 30px; } overview

22. what is the difference between margins and padding? who cares! outside inside

23. 13) create links to your nav bar

24. 14) now we need to create more #topnav elements #topnav ul { border-top: 1px #CCC solid; padding: 10px 0px; }

25. 15) now we need to create even more #topnav elements #topnav ul li { display: inline; }

26. 16) now we need to create even more #topnav elements #topnav ul li { display: inline; }

27. 17) now we need to create even more #topnav elements #topnav ul li a { padding-right: 15px; text-decoration: none;}

28. 18) now we need to create even more #topnav elements #topnav a:link { color: #000; }

29. now we need to create our two columns: right column = 200px left column = 650px space between = 50px

30. 19) let's format the #content element #content { width: 650px; float: left; }

31. 20) let's format the #right-side element #right-side { width: 200px; float: right; }

32. 21) let's start working on the footer (it's harder than you think!) #footer { clear: both; }

33. 22) do we need any spacing around the banner? #banner { margin-bottom: 30px; }

34. 23) let's format our headline tags? h1 { color: #9A7418; border-bottom: 1px #CCC solid; padding-bottom: 15px;}

35. 24) do we need a margin for more spacing? h1 { color: #9A7418; padding-bottom: 15px; border-bottom: 1px #CCC solid; margin-bottom: 15px; }

36. 25) let's format our sub-headline tags? h2 { color: #000; }

37. 26) let's format our sub-headline tags? h3 { color: #000; }

38. 27) more work on the #footer #footer { clear: both; border-top: 1px #CCC solid; }

39. 28) more work on the #footer - padding (inside) #footer { clear: both; border-top: 1px #CCC solid;}

40. 29) now we need to center #footer by adding a class to the footer tag on the html document <p class=&quot;footer-text&quot;> copryright... </p>

41. 30) now add to the css stylesheet on html <p class=&quot;footer-text&quot;> copryright... </p> on CSS .footer-text { text-align: center; }

42. 31) now add class to the two small images on html <img class=&quot;image-frame src=&quot;.jpg&quot; /> on CSS .image-frame { padding: 10px: border: 1px #CCC solid; margin: 10px; }

43. 32) now add class to the three dates to change their color on html <p class=&quot;date&quot;> on CSS .date { color: #9A7418; }

44. 32) we might need to play with the margins to align the date better on both the .date class and h3 .date { color: #9A7418; margin-bottom: 3px; } h3 {margin-top: 0px; }