Your SlideShare is downloading. ×
CSS Page Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Page Design

648
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
648
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PAGE DESIGN CSSTuesday, April 16, 13
  • 2. The Web is made of boxesTuesday, April 16, 13
  • 3. Boxes inside of boxesTuesday, April 16, 13
  • 4. Boxes inside of boxesTuesday, April 16, 13
  • 5. Boxes inside of boxesTuesday, April 16, 13
  • 6. Boxes inside of boxesTuesday, April 16, 13
  • 7. What do we already know about boxes?Tuesday, April 16, 13
  • 8. (Block-level elements are boxes)Tuesday, April 16, 13
  • 9. Headers (h1 - h6)Tuesday, April 16, 13
  • 10. ParagraphsTuesday, April 16, 13
  • 11. List itemsTuesday, April 16, 13
  • 12. Any observations about boxes?Tuesday, April 16, 13
  • 13. Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
  • 14. Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
  • 15. Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
  • 16. Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
  • 17. Boxes take up space By default they • inherit their width • inherit their height • inherit their padding • inherit their margin • have no borders, but canTuesday, April 16, 13
  • 18. Terminology ome m at h!) (and s boxes.htmlTuesday, April 16, 13
  • 19. 300px p{ width: 300px; } WidthTuesday, April 16, 13
  • 20. 310px 300px 5px 5px p{ width: 300px; border: 5px solid #000000; } BorderTuesday, April 16, 13
  • 21. 300px 5px 5px 25 25 360px p{ width: 300px; border: 5px solid #000000; padding: 25px; } PaddingTuesday, April 16, 13
  • 22. padding: 25px; padding: 25px 25px 25px 25px; 25 25 padding-top: 25px; padding-right: 25px; padding-bottom: 25px; padding-left: 25px;Tuesday, April 16, 13
  • 23. 300px 5px 5px 25 25 25 360px p{ width: 300px; border: 5px solid #000000; margin: 25px; } MarginTuesday, April 16, 13
  • 24. 25 25 25 25 360px 360px margin: 25px; padding: 25px; Margin PaddingTuesday, April 16, 13
  • 25. 300px 5px 5px 25 25 25 360px 410px p{ width: 300px; border: 5px solid #000000; margin: 25px; padding: 25px; } Margin + PaddingTuesday, April 16, 13
  • 26. 300px 300px 300px 25 25 25 225 2 2 360px 360px 360px 410px padding: 25px; margin: 25px; padding: 25px; margin: 25px; Compare padding & marginTuesday, April 16, 13
  • 27. Margin + Border + Padding + (content) Width content This is my 300px paragraph. It has 20x of padding, 50px of margin and padding border border margin margin padding a 10px border. 50 + 10 + 20 + 300 + 20 + 10 + 50 = 460pxTuesday, April 16, 13
  • 28. boxes1-1.htmlTuesday, April 16, 13
  • 29. Tuesday, April 16, 13
  • 30. 400pxTuesday, April 16, 13
  • 31. h1, h2, p, blockquote{ width: 400px; background-color: #cccccc; } Tuesday, April 16, 13
  • 32. Tuesday, April 16, 13
  • 33. h2{ margin-top: 0; margin-bottom: 5px; margin-left: 0; margin-right: 0; padding: 0; } .date, .byline{ margin: 0; padding: 0; }Tuesday, April 16, 13
  • 34. 5px 10px 5px 10pxTuesday, April 16, 13
  • 35. blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; }Tuesday, April 16, 13
  • 36. Tuesday, April 16, 13
  • 37. 400px 400px 10 5 5Tuesday, April 16, 13
  • 38. blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; width: 380px; }Tuesday, April 16, 13
  • 39. blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; width: 380px; } blockquote:first-letter{ font-size: 1.9em; }Tuesday, April 16, 13
  • 40. boxes2-1.htmlTuesday, April 16, 13
  • 41. Tuesday, April 16, 13
  • 42. header content footerTuesday, April 16, 13
  • 43. header #nav article footer wrapperTuesday, April 16, 13
  • 44. <body> header #nav <div id=”wrapper”> <header> <h1>North Gate</h1> <div id=”nav”> UL ...</div> </header> article <article> .... </article> <footer>...</footer> footer </div> wrapper </body>Tuesday, April 16, 13
  • 45. #wrapper{ width: 700px; background-color: #ffffff; margin: 10px auto 30px auto; }Tuesday, April 16, 13
  • 46. Sometimes you want a box to not be a boxTuesday, April 16, 13
  • 47. What if LI could be inline?Tuesday, April 16, 13
  • 48. What if LI could be inline?Tuesday, April 16, 13
  • 49. #nav ul, #nav li { margin: 0; padding: 0; list-style: none; } #nav ul { background-color: #000000; margin-top: 10px; margin-bottom: 10px; } #nav li { display: inline; color: #FFF; padding-left: 10px; line-height: 25px; }Tuesday, April 16, 13
  • 50. Designing on a GridTuesday, April 16, 13
  • 51. Building On A GridTuesday, April 16, 13
  • 52. Tuesday, April 16, 13
  • 53. Tuesday, April 16, 13
  • 54. Tuesday, April 16, 13
  • 55. Margin + Border + Padding + (content) WidthTuesday, April 16, 13
  • 56. Tuesday, April 16, 13
  • 57. Tuesday, April 16, 13
  • 58. <body> <div id=”wrapper”> <div id=”header”> <h1>North Gate</h1> <div id=”nav”> UL ...</div> </div> <div id=”content”> .... </div> <div id=”sidebar”> .... </div> <div id=”footer”>...</div> </div> </body>Tuesday, April 16, 13
  • 59. <body> <div id=”wrapper”> <div id=”header”> <h1>North Gate</h1> <div id=”nav”> UL ...</div> </div> <div id=”content”> .... </div> <div id=”sidebar”> .... </div> <div id=”footer”>...</div> </div> </body>Tuesday, April 16, 13
  • 60. <body> <div id=”wrapper”> <div id=”header”> <h1>North Gate</h1> <div id=”nav”> UL ...</div> </div> <div id=”content”> .... </div> <div id=”sidebar”> .... </div> <div id=”footer”>...</div> </div> </body>Tuesday, April 16, 13
  • 61. <body> <div id=”wrapper”> <div id=”header”> <h1>North Gate</h1> <div id=”nav”> UL ...</div> </div> <div id=”content”> <div id=”article-inline”> <h3>MacArthur</h3> </div> <p>lorem</p> </div> <div id=”sidebar”> .... </div>Tuesday, April 16, 13
  • 62. <body> <div id=”wrapper”> <div id=”header”> <h1>North Gate</h1> <div id=”nav”> UL ...</div> </div> <div id=”content”> .... </div> <div id=”sidebar”> .... </div> <div id=”footer”>...</div> </div> </body>Tuesday, April 16, 13
  • 63. How wide?Tuesday, April 16, 13
  • 64. How wide?Tuesday, April 16, 13
  • 65. How wide?Tuesday, April 16, 13
  • 66. How wide?Tuesday, April 16, 13
  • 67. No ConsistencyTuesday, April 16, 13
  • 68. No ConsistencyTuesday, April 16, 13
  • 69. ConsistencyTuesday, April 16, 13
  • 70. How wide?Tuesday, April 16, 13
  • 71. BTW, is that margin on the #content? on the #sidebar? on both?Tuesday, April 16, 13
  • 72. BTW, is that margin or padding on the #content? on the #sidebar? on both?Tuesday, April 16, 13
  • 73. I propose a tradeoffTuesday, April 16, 13
  • 74. Let me take away a little of your flexibility and I’ll answer a lot of those questions.Tuesday, April 16, 13
  • 75. Tuesday, April 16, 13 GRID
  • 76. Tuesday, April 16, 13
  • 77. 940px 620px 300px 10px 10px 20px 220pxTuesday, April 16, 13
  • 78. Tuesday, April 16, 13
  • 79. Tuesday, April 16, 13
  • 80. Tuesday, April 16, 13
  • 81. Tuesday, April 16, 13
  • 82. Tuesday, April 16, 13
  • 83. Tuesday, April 16, 13
  • 84. Tuesday, April 16, 13
  • 85. Tuesday, April 16, 13
  • 86. Tuesday, April 16, 13
  • 87. Tuesday, April 16, 13
  • 88. Tuesday, April 16, 13
  • 89. Tuesday, April 16, 13
  • 90. How it worksTuesday, April 16, 13
  • 91. 940pxTuesday, April 16, 13
  • 92. 940? 960?Tuesday, April 16, 13
  • 93. width=940px margin-left: 10px margin-right: 10px 940 + 10 + 10 = 960Tuesday, April 16, 13
  • 94. 940px 10 10Tuesday, April 16, 13
  • 95. 12 column layout 60px 20pxTuesday, April 16, 13
  • 96. 5 columns 7 columns 380px 540px 60 20 60 20 60 20 60 20 60 60 20 60 20 60 20 60 20 60 20 60 20 60Tuesday, April 16, 13
  • 97. 5 columns 7 columns 5 columns 2 col 380px 60 20 60 20 60 20 60 20 60 380px 140px 60 20 60 20 60 20 60 20 60 60 20 60 540pxTuesday, April 16, 13
  • 98. 5 columns 380px Your boxes must go to the lines, not the guttersTuesday, April 16, 13
  • 99. Many Grids to Choose FromTuesday, April 16, 13
  • 100. Tuesday, April 16, 13
  • 101. Tuesday, April 16, 13
  • 102. cascade is the “C” in CSSTuesday, April 16, 13
  • 103. Tuesday, April 16, 13
  • 104. body { background-color: #ffffff; }Tuesday, April 16, 13
  • 105. unless told otherwise, a child element inherits applicable rules from its parentsTuesday, April 16, 13
  • 106. body{ background-color: #ffffff; }Tuesday, April 16, 13
  • 107. <body> <p>Because this paragraph is inside the body tag (like all page elements) it inherits the text properties of the body. </p> </body>Tuesday, April 16, 13
  • 108. But what about the other element backgrounds that aren’t white?Tuesday, April 16, 13
  • 109. #header{ #nav{ background-color: #F3F5F9; background-color: #CBD7E7; } }Tuesday, April 16, 13
  • 110. Now add a link and see what happensTuesday, April 16, 13
  • 111. body { color: #FF0000; font-size: 15px; } p{ font-size: 10px; } a{ color: #0000FF; }Tuesday, April 16, 13
  • 112. specific ityTuesday, April 16, 13
  • 113. p{ color: #FF0000; background-color: #000000; } Unless a more specific rule applies to a paragraph, this “type” selector defines how all paragraphs in your document will look.Tuesday, April 16, 13
  • 114. .alert { color: #00FF00; background-color: #0000FF; } <p class=“alert”> This is a paragraph with the “alert” class rules applied to it. Where its rules conflict with a less specific “type” selector, the class selector takes precedence. </p>Tuesday, April 16, 13
  • 115. selectors2.htmlTuesday, April 16, 13
  • 116. CSS Selectors have weight High Value Low Value Tie Breaker ID | Class | Type Position (#nav) (.byline) (p) SELECTOR CONFLICTS CSS SELECTORSTuesday, April 16, 13

×