Inline, Block and Positioning in CSS

1,227 views

Published on

CSS slideshow for class.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,227
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Inline, Block and Positioning in CSS

  1. 1. Inline vs Block
  2. 2. Block <div></div>   <div></div>   <div></div>
  3. 3. Inline <span></span>   <span></span>   <span></span>
  4. 4. Examples of each Block Elements <div>   <p>   <h1>   <ul>/<li> Inline Elements <span>   <a>   <strong>   <img> With CSS, you can switch these! (e.g. you can make divs inline or spans block)
  5. 5. Understanding Rules of Block Elements • A <div> tag, (or any block element) will be invisible by default.
  6. 6. Understanding Rules of Block Elements • A <div> tag, (or any block element) will be invisible by default. • A <div> tag (or any block element) will span the length of the browser by 100% by default.
  7. 7. Understanding Rules of Block Elements • A <div> tag, (or any block element) will be invisible by default. • A <div> tag (or any block element) will span the length of the browser by 100% by default. • A <div> tag (or any block element) will conform to its content if no height is set.
  8. 8. Understanding Rules of Block Elements • A <div> tag, (or any block element) will be invisible by default. • A <div> tag (or any block element) will span the length of the browser by 100% by default. • A <div> tag (or any block element) will conform to its content if no height is set. • A <div> tag will stack from top down, regardless of the width.
  9. 9. Exercise Step 1: Create two <div> tags below everything you've done so far, give them class="example1"
  10. 10. Exercise Step 1: Create two <div> tags below everything you've done so far, give them class="example1" <div  class="example1"></div>   <div  class="example1"></div>   ! By default, <div> tags are invisible.
  11. 11. Exercise Step 2: In your <style> tag, add a CSS rule that targets the div, and set's border: 1px  solid  black;
  12. 12. Exercise Step 2: In your <style> tag, add a CSS rule that targets the div, and set's border: 1px  solid  black; .example1{        border:  1px  solid  black;   }   ! By default, block elements span the width of the page.
  13. 13. Exercise Step 3: In the <div> tags, add two sentences about yourself.
  14. 14. Exercise Step 3: In the <div> tags, add two sentences about yourself. <div…>I  feel  fine.</div>   <div…>I  think.</div>   ! By default, block elements conform to their content if no height is set.
  15. 15. Exercise Step 4: In your <style> tag, add another CSS rule to the div selector: height:  100px;
  16. 16. Exercise Step 4: In your <style> tag, add another CSS rule to the div selector: height:  100px; .example1{      height:100px;   }   ! If a height is specified, it takes precedence over the content.
  17. 17. Exercise Step 5: In your <style> tag, add more CSS rules: width:  100px;   background:  red;
  18. 18. Exercise Step 5: In your <style> tag, add more CSS rules: width:  100px;   background:  red; .example1{      height:100px;      width:100px;      background:  red;   }   Stacks from the top down.
  19. 19. Exercise Step 6: In your <style> tag, set the overflow property: overflow:hidden;
  20. 20. Exercise Step 6: In your <style> tag, set the overflow property: overflow:hidden; .example1{      overflow:hidden;   }   This controls what happens to things that protrude from the box.
  21. 21. Understanding rules of inline elements • By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text.
  22. 22. Understanding rules of inline elements • By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text. • If there isn't enough browser width to fit inline elements, they automatically shift to the next line.
  23. 23. Understanding rules of inline elements • By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text. • If there isn't enough browser width to fit inline elements, they automatically shift to the next line. • Height is defined by "line-height", and width is defined by the text flow; you cannot set a height or width.
  24. 24. Understanding rules of inline elements • By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text. • If there isn't enough browser width to fit inline elements, they automatically shift to the next line. • Height is defined by "line-height", and width is defined by the text flow; you cannot set a height or width. • Generally, inline elements may only contain content, data or other inline elements (not block elements)
  25. 25. Exercise Step 1: Create multiple span tags, each one surrounding two words of the following aphorism: "It's all storytelling, you know. That's what journalism is all about" Tom Brokaw"
  26. 26. Exercise Step 1: Create multiple span tags, each one surrounding two words of the following aphorism: "It's all storytelling, you know. That's what journalism is all about" Tom Brokaw" <span>It's  all  </span>   <span>storytelling  </span>   ! Inline elements stack from the left. If you had used <div> tags, it would stack from top down.
  27. 27. Exercise Step 2: Shrink your browser window to see how the span tags will drop down to the next line.
  28. 28. Exercise Step 2: Shrink your browser window to see how the span tags will drop down to the next line. If there isn't enough room, span tags will drop to the next line.
  29. 29. Exercise Step 3: Add the following CSS rules to the span selector: height:  100px;   width:  100px;
  30. 30. Exercise Step 3: Add the following CSS rules to the span selector: height:  100px;   width:  100px; span{     width  :  100px;     height:  100px;   }   Nothing happens! Height is defined by the line-height property, and width is defined by content.
  31. 31. Exercise Step 4: Add the following CSS rules to the span selector: line-­‐height:100px;
  32. 32. Exercise Step 4: Add the following CSS rules to the span selector: line-­‐height:100px; span{     line-­‐height:100px;   }   ! Line height is the space between lines.
  33. 33. Recap Block elements (layout): • Stacks from the top down, they conform to the content unless you set a width/height. ! Inline elements (content): • Works like text, stacks from the left. Cannot set a width and height on these.
  34. 34. Recap Block elements (layout): • Stacks from the top down, they conform to the content unless you set a width/height. ! Inline elements (content): • Works like text, stacks from the left. Cannot set a width and height on these. Fortunately, we will be working mostly with block elements, which are easier to understand.
  35. 35. The Box Model
  36. 36. Box model applies to BLOCK only hello Margin Border Width Padding
  37. 37. Box Model Any padding, borders or margin are in addition to the width of the box.
  38. 38. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   960px
  39. 39. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;   } 960px
  40. 40. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;   } 960px
  41. 41. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;   } 960px
  42. 42. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;      padding:  5px;   } 960px
  43. 43. HTML: <div  id="container">   ! 960px    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;      padding:  5px;   } 960px
  44. 44. HTML: <div  id="container">   ! 960px    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;      padding:  5px;   } 960px
  45. 45. Pop Quiz
  46. 46. What is the width of this box? hello 20px 2px 200px 10px
  47. 47. What is the width of this box? hello 20px 2px 200px 200 pixels 10px
  48. 48. What is the width and padding combined? hello 20px 2px 200px 10px
  49. 49. What is the width and padding combined? hello 20px 2px 200px 220 pixels 10px
  50. 50. What is the width and padding and border combined? hello 20px 2px 200px 10px
  51. 51. What is the width and padding and border combined? hello 20px 2px 200px 224 pixels 10px
  52. 52. What is the total (outer) width? hello 20px 2px 200px 10px
  53. 53. What is the total (outer) width? 200 + 20 + 20 + ! 10 + 10 + 2 + 2 =! hello ! 264 pixels 20px 2px 200px 10px
  54. 54. padding and margins padding:
  55. 55. padding and margins padding:10px;
  56. 56. padding and margins padding:10px  5px  1px  0;
  57. 57. padding and margins padding:10px  5px  1px  0; top
  58. 58. padding and margins padding:10px  5px  1px  0; top right
  59. 59. padding and margins padding:10px  5px  1px  0; top right bottom
  60. 60. padding and margins padding:10px  5px  1px  0; top right left bottom
  61. 61. padding and margins padding:10px  5px  1px  0; top right left bottom
  62. 62. padding and margins margin: 5px  15px  1px  10px;
  63. 63. padding and margins margin: 5px  15px  1px  10px; top
  64. 64. padding and margins margin: 5px  15px  1px  10px; top right
  65. 65. padding and margins margin: 5px  15px  1px  10px; top right bottom
  66. 66. padding and margins margin: 5px  15px  1px  10px; top right bottom left
  67. 67. padding and margins padding:10px  2px;
  68. 68. padding and margins padding:10px  2px; top! bottom
  69. 69. padding and margins padding:10px  2px; top! right! bottom left
  70. 70. Pop Quiz
  71. 71. Explain the size of the margins around the box margin:  5px  25px;
  72. 72. Explain the size of the margins around the box margin:  5px  25px; Top and bottom are 5 pixels, ! left and right are 25 pixels.!
  73. 73. Explain the size of the padding inside this box padding:  1px  1px  1px  40px;
  74. 74. Explain the size of the padding inside this box padding:  1px  1px  1px  40px; Top, right, bottom are 1 pixel,! the left side is 40 pixels
  75. 75. Explain the size of the margins around the box margin:  0  5px;
  76. 76. Explain the size of the margins around the box margin:  0  5px; Top, right are 0 pixels,! the left and right side is 5 pixels
  77. 77. Explain the size of the padding inside the box padding:  15px;
  78. 78. Explain the size of the padding inside the box padding:  15px; All sides are 15 pixels
  79. 79. Margins, Padding, Width hello Margin Border Width Padding
  80. 80. Box model
  81. 81. Box model
  82. 82. Box model
  83. 83. Box model
  84. 84. More on responsiveness
  85. 85. Set widths as percentages <div></div> 100% Setting width as a percentage will keep it relative to browser width
  86. 86. Browsers don't know how to deal with heights <div></div> ??? Heights don't exist in most cases because the user can scroll Many times you have to manually set a height.
  87. 87. Exceptions: Images/Video <img  src="…"  width="100%"  height="auto">   ! ! <video  width="100%"  height="auto">
  88. 88. Exceptions: Images/Video <img  src="…"  width="100%"  height="auto">   ! ! <video  width="100%"  height="auto">
  89. 89. Video
  90. 90. The problem with online video <video  width="100%"  height="auto">   ! ! ! ! </video> Each browser is only compatible with certain types of video
  91. 91. The problem with online video <video  width="100%"  height="auto">        <source  src="video.mp4"  type="video/mp4"> ! ! ! ! </video> Chrome/Safari/iOS Each browser is only compatible with certain types of video
  92. 92. The problem with online video <video  width="100%"  height="auto">        <source  src="video.mp4"  type="video/mp4"> ! !    <source  src="video.ogv"  type="video/ogg"> ! ! </video> Chrome/Safari/iOS Firefox Each browser is only compatible with certain types of video
  93. 93. The problem with online video <video  width="100%"  height="auto">        <source  src="video.mp4"  type="video/mp4"> ! !    <source  src="video.ogv"  type="video/ogg"> !      <source  src="video.webm"  type="video/webm"> ! </video> Chrome/Safari/iOS Firefox Internet Explorer Each browser is only compatible with certain types of video
  94. 94. The problem with online video <video  width="100%"  height="auto">        <source  src="video.mp4"  type="video/mp4"> ! !    <source  src="video.ogv"  type="video/ogg"> !      <source  src="video.webm"  type="video/webm"> !      <img  src="fallback.jpg"> </video> Chrome/Safari/iOS Firefox Internet Explorer Each browser is only compatible with certain types of video
  95. 95. Positioning
  96. 96. #sometag{   !  position:  static;   ! }
  97. 97. #sometag{   !  position:  static;   ! }
  98. 98. • Static - This is the default positioning. Elements are arranged according to the normal document flow.
  99. 99. • Static - This is the default positioning. Elements are arranged according to the normal document flow. • Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference.
  100. 100. • Static - This is the default positioning. Elements are arranged according to the normal document flow. • Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference. • Absolute - Elements are positioned separate from the document flow. Items will be located relative to its parent element.
  101. 101. • Static - This is the default positioning. Elements are arranged according to the normal document flow. • Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference. • Absolute - Elements are positioned separate from the document flow. Items will be located relative to its parent element. • Fixed - Position elements separate from the document flow, but relative to the browser. Stays in the same spot even when scrolled.
  102. 102. position: static;
  103. 103. #box{      position:  absolute;      top:  25px;      left:  25px;     }
  104. 104. 25 25 #box{      position:  absolute;      top:  25px;      left:  25px;     }
  105. 105. 25 25 #box{      position:  absolute;      top:  25px;      left:  25px;     }
  106. 106. 25 25 #box{      position:  absolute;      top:  25px;      left:  25px;     } #container{      position:  relative; }
  107. 107. 25 25 #box{      position:  absolute;      top:  25px;      left:  25px;     } #container{      position:  relative; }
  108. 108. HTML: <div  id="container">   !        <div  id="box"></div>   ! ! </div> CSS: #container{   position:  relative;   }   ! #box{      position:  absolute;   }
  109. 109. Pop Quiz!
  110. 110. What type of positioning should the outer container be?
  111. 111. What type of positioning should the outer container be? relative!
  112. 112. What type of positioning should content inside the container be, when you want to position it?
  113. 113. What type of positioning should content inside the container be, when you want to position it? absolute!
  114. 114. z-index
  115. 115. • z-index property is an arbitrary number that determines the stacking order.! • A higher z-index number will indicate those elements should be on top. A lower number means they should appear underneath other elements.! • z-index property can only be applied to elements that are positioned with relative, absolute or fixed, but not the default static.
  116. 116. HTML: <div  id="container">      <div  id="redbox"></div>      <div  id="bluebox"></div>      <div  id="greenbox"></div>   </div> CSS: #redbox{      position:absolute;      z-­‐index:  938323;   }   #bluebox{      position:absolute;      z-­‐index:  10;   }   #greenbox{   z-­‐index:  9999999999;   }
  117. 117. HTML: <div  id="container">      <div  id="redbox"></div>      <div  id="bluebox"></div>      <div  id="greenbox"></div>   </div> CSS: #redbox{      position:absolute;      z-­‐index:  938323;   }   #bluebox{      position:absolute;      z-­‐index:  10;   }   #greenbox{   z-­‐index:  9999999999;   }
  118. 118. Pop Quiz
  119. 119. Which element will display on top of the other? #blue{   position:  relative;   z-­‐index:  55;   } #red{   position:  absolute;   z-­‐index:  45;   }
  120. 120. Which element will display on top of the other? #blue{   position:  relative;   z-­‐index:  55;   } #red{   position:  absolute;   z-­‐index:  45;   } #blue!
  121. 121. Which element will display on top of the other? .bluebox{   position:static;   z-­‐index:  55;   } #bluebox{   position:  relative;   z-­‐index:  45;   }
  122. 122. Which element will display on top of the other? .bluebox{   position:static;   z-­‐index:  55;   } #bluebox{   position:  relative;   z-­‐index:  45;   } #bluebox!
  123. 123. Exercise <div  id="redbox"  class="box"></div>   <div  id="bluebox"  class="box"></div>   <div  id="greenbox"  class="box"></div>
  124. 124. Exercise .box{      width:300px;      height:300px;      border:1px  solid  black;   }
  125. 125. Exercise #bluebox{   !      background:blue;        position:  absolute;        top:  50px;        left:50px;   ! }
  126. 126. Exercise #redbox{   !      background:  red;        position:  absolute;        top:  150px;        left:  150px;   ! }
  127. 127. Exercise #greenbox{   !      background:  green;        position:  absolute;        top:  225px;        left:  225px;   ! }

×