Your SlideShare is downloading. ×
0
PAGE DESIGN CSSTuesday, April 16, 13
The Web is made of           boxesTuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
Boxes inside of boxesTuesday, April 16, 13
What do we already know about boxes?Tuesday, April 16, 13
(Block-level elements are boxes)Tuesday, April 16, 13
Headers (h1 - h6)Tuesday, April 16, 13
ParagraphsTuesday, April 16, 13
List itemsTuesday, April 16, 13
Any observations about boxes?Tuesday, April 16, 13
Boxes take up space              By default they                   • inherit their width                   • inherit their...
Boxes take up space              By default they                   • inherit their width                   • inherit their...
Boxes take up space              By default they                   • inherit their width                   • inherit their...
Boxes take up space              By default they                   • inherit their width                   • inherit their...
Boxes take up space              By default they                   • inherit their width                   • inherit their...
Terminology                                         ome m at h!)                                (and s                    ...
300px                        p{                             width: 300px;                         }               WidthTue...
310px                                       300px                        5px                                5px           ...
300px                         5px                                           5px                               25          ...
padding: 25px;                             padding: 25px 25px 25px 25px;                25      25                        ...
300px                         5px                                    5px                        25                        ...
25                        25   25                    25                             360px                     360px       ...
300px                          5px                                         5px                                    25      ...
300px                     300px                      300px     25                                 25   25                 ...
Margin + Border + Padding + (content) Width                                                        content                ...
boxes1-1.htmlTuesday, April 16, 13
Tuesday, April 16, 13
400pxTuesday, April 16, 13
h1, h2, p, blockquote{                             width: 400px;                             background-color: #cccccc;   ...
Tuesday, April 16, 13
h2{                              margin-top: 0;                              margin-bottom: 5px;                          ...
5px                                10px                          5px   10pxTuesday, April 16, 13
blockquote{                             margin-left: 10px;                             padding-left: 5px;                 ...
Tuesday, April 16, 13
400px                                       400px                        10       5                             5Tuesday, ...
blockquote{                             margin-left: 10px;                             padding-left: 5px;                 ...
blockquote{                             margin-left: 10px;                             padding-left: 5px;                 ...
boxes2-1.htmlTuesday, April 16, 13
Tuesday, April 16, 13
header                  content                   footerTuesday, April 16, 13
header                             #nav                   article                   footer                                ...
<body>                            header                                                       #nav          <div id=”wrap...
#wrapper{              width: 700px;              background-color: #ffffff;              margin: 10px auto 30px auto;    ...
Sometimes you want a box to                               not be a boxTuesday, April 16, 13
What if LI could be inline?Tuesday, April 16, 13
What if LI could be inline?Tuesday, April 16, 13
#nav ul, #nav li {                   margin: 0;                   padding: 0;                   list-style: none;         ...
Designing on a GridTuesday, April 16, 13
Building On A GridTuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Margin + Border + Padding + (content) WidthTuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
<body>      <div id=”wrapper”>        <div id=”header”>           <h1>North Gate</h1>           <div id=”nav”> UL ...</div...
<body>      <div id=”wrapper”>        <div id=”header”>           <h1>North Gate</h1>           <div id=”nav”> UL ...</div...
<body>      <div id=”wrapper”>        <div id=”header”>           <h1>North Gate</h1>           <div id=”nav”> UL ...</div...
<body>      <div id=”wrapper”>        <div id=”header”>           <h1>North Gate</h1>           <div id=”nav”> UL ...</div...
<body>      <div id=”wrapper”>        <div id=”header”>           <h1>North Gate</h1>           <div id=”nav”> UL ...</div...
How wide?Tuesday, April 16, 13
How wide?Tuesday, April 16, 13
How wide?Tuesday, April 16, 13
How wide?Tuesday, April 16, 13
No ConsistencyTuesday, April 16, 13
No ConsistencyTuesday, April 16, 13
ConsistencyTuesday, April 16, 13
How wide?Tuesday, April 16, 13
BTW, is that margin   on the #content?   on the #sidebar?   on both?Tuesday, April 16, 13
BTW, is that margin or padding   on the #content?   on the #sidebar?   on both?Tuesday, April 16, 13
I propose a tradeoffTuesday, April 16, 13
Let me take away a little of your flexibility              and I’ll answer a lot of those questions.Tuesday, April 16, 13
Tuesday, April 16, 13                        GRID
Tuesday, April 16, 13
940px                         620px                          300px                  10px                                  ...
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
How it worksTuesday, April 16, 13
940pxTuesday, April 16, 13
940? 960?Tuesday, April 16, 13
width=940px                        margin-left: 10px                        margin-right: 10px                        940 ...
940px                        10           10Tuesday, April 16, 13
12 column layout                        60px         20pxTuesday, April 16, 13
5 columns                                               7 columns                                    380px                ...
5 columns                                               7 columns                                                         ...
5 columns                                       380px                        Your boxes must go to the lines, not the gutt...
Many Grids to Choose FromTuesday, April 16, 13
Tuesday, April 16, 13
Tuesday, April 16, 13
cascade is the “C” in                           CSSTuesday, April 16, 13
Tuesday, April 16, 13
body {                          background-color: #ffffff;                        }Tuesday, April 16, 13
unless told otherwise, a child element inherits                        applicable rules from its parentsTuesday, April 16,...
body{          	 background-color: #ffffff;          }Tuesday, April 16, 13
<body>                          <p>Because this paragraph is inside the body tag (like all page elements) it inherits the ...
But what about the other element           backgrounds that aren’t white?Tuesday, April 16, 13
#header{                       #nav{          	 background-color: #F3F5F9;   	 background-color: #CBD7E7;          }      ...
Now add a link and see what happensTuesday, April 16, 13
body {                          color: #FF0000;                          font-size: 15px;                        }        ...
specific                             ityTuesday, April 16, 13
p{                             color: #FF0000;                             background-color: #000000;                     ...
.alert {                               color: #00FF00;                               background-color: #0000FF;           ...
selectors2.htmlTuesday, April 16, 13
CSS Selectors have weight                          High Value                         Low Value              Tie Breaker  ...
Upcoming SlideShare
Loading in...5
×

CSS Page Design

674

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
674
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CSS Page Design"

  1. 1. PAGE DESIGN CSSTuesday, April 16, 13
  2. 2. The Web is made of boxesTuesday, April 16, 13
  3. 3. Boxes inside of boxesTuesday, April 16, 13
  4. 4. Boxes inside of boxesTuesday, April 16, 13
  5. 5. Boxes inside of boxesTuesday, April 16, 13
  6. 6. Boxes inside of boxesTuesday, April 16, 13
  7. 7. What do we already know about boxes?Tuesday, April 16, 13
  8. 8. (Block-level elements are boxes)Tuesday, April 16, 13
  9. 9. Headers (h1 - h6)Tuesday, April 16, 13
  10. 10. ParagraphsTuesday, April 16, 13
  11. 11. List itemsTuesday, April 16, 13
  12. 12. Any observations about boxes?Tuesday, April 16, 13
  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. 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. 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. 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. 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. 18. Terminology ome m at h!) (and s boxes.htmlTuesday, April 16, 13
  19. 19. 300px p{ width: 300px; } WidthTuesday, April 16, 13
  20. 20. 310px 300px 5px 5px p{ width: 300px; border: 5px solid #000000; } BorderTuesday, April 16, 13
  21. 21. 300px 5px 5px 25 25 360px p{ width: 300px; border: 5px solid #000000; padding: 25px; } PaddingTuesday, April 16, 13
  22. 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. 23. 300px 5px 5px 25 25 25 360px p{ width: 300px; border: 5px solid #000000; margin: 25px; } MarginTuesday, April 16, 13
  24. 24. 25 25 25 25 360px 360px margin: 25px; padding: 25px; Margin PaddingTuesday, April 16, 13
  25. 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. 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. 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. 28. boxes1-1.htmlTuesday, April 16, 13
  29. 29. Tuesday, April 16, 13
  30. 30. 400pxTuesday, April 16, 13
  31. 31. h1, h2, p, blockquote{ width: 400px; background-color: #cccccc; } Tuesday, April 16, 13
  32. 32. Tuesday, April 16, 13
  33. 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. 34. 5px 10px 5px 10pxTuesday, April 16, 13
  35. 35. blockquote{ margin-left: 10px; padding-left: 5px; border-left: 5px solid #000000; padding-top: 10px; padding-bottom: 10px; }Tuesday, April 16, 13
  36. 36. Tuesday, April 16, 13
  37. 37. 400px 400px 10 5 5Tuesday, April 16, 13
  38. 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. 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. 40. boxes2-1.htmlTuesday, April 16, 13
  41. 41. Tuesday, April 16, 13
  42. 42. header content footerTuesday, April 16, 13
  43. 43. header #nav article footer wrapperTuesday, April 16, 13
  44. 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. 45. #wrapper{ width: 700px; background-color: #ffffff; margin: 10px auto 30px auto; }Tuesday, April 16, 13
  46. 46. Sometimes you want a box to not be a boxTuesday, April 16, 13
  47. 47. What if LI could be inline?Tuesday, April 16, 13
  48. 48. What if LI could be inline?Tuesday, April 16, 13
  49. 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. 50. Designing on a GridTuesday, April 16, 13
  51. 51. Building On A GridTuesday, April 16, 13
  52. 52. Tuesday, April 16, 13
  53. 53. Tuesday, April 16, 13
  54. 54. Tuesday, April 16, 13
  55. 55. Margin + Border + Padding + (content) WidthTuesday, April 16, 13
  56. 56. Tuesday, April 16, 13
  57. 57. Tuesday, April 16, 13
  58. 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. 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. 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. 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. 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. 63. How wide?Tuesday, April 16, 13
  64. 64. How wide?Tuesday, April 16, 13
  65. 65. How wide?Tuesday, April 16, 13
  66. 66. How wide?Tuesday, April 16, 13
  67. 67. No ConsistencyTuesday, April 16, 13
  68. 68. No ConsistencyTuesday, April 16, 13
  69. 69. ConsistencyTuesday, April 16, 13
  70. 70. How wide?Tuesday, April 16, 13
  71. 71. BTW, is that margin on the #content? on the #sidebar? on both?Tuesday, April 16, 13
  72. 72. BTW, is that margin or padding on the #content? on the #sidebar? on both?Tuesday, April 16, 13
  73. 73. I propose a tradeoffTuesday, April 16, 13
  74. 74. Let me take away a little of your flexibility and I’ll answer a lot of those questions.Tuesday, April 16, 13
  75. 75. Tuesday, April 16, 13 GRID
  76. 76. Tuesday, April 16, 13
  77. 77. 940px 620px 300px 10px 10px 20px 220pxTuesday, April 16, 13
  78. 78. Tuesday, April 16, 13
  79. 79. Tuesday, April 16, 13
  80. 80. Tuesday, April 16, 13
  81. 81. Tuesday, April 16, 13
  82. 82. Tuesday, April 16, 13
  83. 83. Tuesday, April 16, 13
  84. 84. Tuesday, April 16, 13
  85. 85. Tuesday, April 16, 13
  86. 86. Tuesday, April 16, 13
  87. 87. Tuesday, April 16, 13
  88. 88. Tuesday, April 16, 13
  89. 89. Tuesday, April 16, 13
  90. 90. How it worksTuesday, April 16, 13
  91. 91. 940pxTuesday, April 16, 13
  92. 92. 940? 960?Tuesday, April 16, 13
  93. 93. width=940px margin-left: 10px margin-right: 10px 940 + 10 + 10 = 960Tuesday, April 16, 13
  94. 94. 940px 10 10Tuesday, April 16, 13
  95. 95. 12 column layout 60px 20pxTuesday, April 16, 13
  96. 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. 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. 98. 5 columns 380px Your boxes must go to the lines, not the guttersTuesday, April 16, 13
  99. 99. Many Grids to Choose FromTuesday, April 16, 13
  100. 100. Tuesday, April 16, 13
  101. 101. Tuesday, April 16, 13
  102. 102. cascade is the “C” in CSSTuesday, April 16, 13
  103. 103. Tuesday, April 16, 13
  104. 104. body { background-color: #ffffff; }Tuesday, April 16, 13
  105. 105. unless told otherwise, a child element inherits applicable rules from its parentsTuesday, April 16, 13
  106. 106. body{ background-color: #ffffff; }Tuesday, April 16, 13
  107. 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. 108. But what about the other element backgrounds that aren’t white?Tuesday, April 16, 13
  109. 109. #header{ #nav{ background-color: #F3F5F9; background-color: #CBD7E7; } }Tuesday, April 16, 13
  110. 110. Now add a link and see what happensTuesday, April 16, 13
  111. 111. body { color: #FF0000; font-size: 15px; } p{ font-size: 10px; } a{ color: #0000FF; }Tuesday, April 16, 13
  112. 112. specific ityTuesday, April 16, 13
  113. 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. 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. 115. selectors2.htmlTuesday, April 16, 13
  116. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×