CSS Page Design
Upcoming SlideShare
Loading in...5
×
 

CSS Page Design

on

  • 741 views

 

Statistics

Views

Total Views
741
Views on SlideShare
361
Embed Views
380

Actions

Likes
0
Downloads
4
Comments
0

5 Embeds 380

http://medill.co 362
http://fall405.medill.co 14
http://www.medill.co 2
http://webcache.googleusercontent.com 1
http://2011.medill.co 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS Page Design Presentation 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