Inline, Block and Positioning in CSS
- 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)
- 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. 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. 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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. 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. 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. 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. 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. 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. 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.
- 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.
- 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.
- 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. 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. 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.
- 39. HTML:
<div
id="container">
!
<div
id="navigation">
</div>
!
</div>
CSS:
#container{
width:
960px;
}
#navigation{
width:
960px;
background:
gray;
}
960px
- 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. HTML:
<div
id="container">
!
<div
id="navigation">
</div>
!
</div>
CSS:
#container{
width:
960px;
}
#navigation{
width:
960px;
background:
gray;
border:
5px
solid
red;
}
960px
- 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. 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. 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
- 46. What is the width of this box?
hello
20px
2px
200px
10px
- 47. What is the width of this box?
hello
20px
2px
200px
200 pixels
10px
- 48. What is the width and
padding combined?
hello
20px
2px
200px
10px
- 49. What is the width and
padding combined?
hello
20px
2px
200px
220 pixels
10px
- 50. What is the width and
padding and border combined?
hello
20px
2px
200px
10px
- 51. What is the width and
padding and border combined?
hello
20px
2px
200px
224 pixels
10px
- 52. What is the total (outer) width?
hello
20px
2px
200px
10px
- 53. What is the total (outer) width?
200 + 20 + 20 + !
10 + 10 + 2 + 2 =!
hello
!
264 pixels
20px
2px
200px
10px
- 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.!
- 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
- 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
- 78. Explain the size of the
padding inside the box
padding:
15px;
All sides are 15 pixels
- 85. Set widths as percentages
<div></div>
100%
Setting width as a percentage will
keep it relative to browser width
- 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.
- 90. The problem with online video
<video
width="100%"
height="auto">
!
!
!
!
</video>
Each browser is only compatible
with certain types of video
- 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. 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. 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. 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
- 98. • Static - This is the default positioning. Elements are
arranged according to the normal document flow.
- 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. • 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. • 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.
- 106. #box{
position:
absolute;
top:
25px;
left:
25px;
}
- 107. 25
25
#box{
position:
absolute;
top:
25px;
left:
25px;
}
- 108. 25
25
#box{
position:
absolute;
top:
25px;
left:
25px;
}
- 109. 25
25
#box{
position:
absolute;
top:
25px;
left:
25px;
}
#container{
position:
relative;
}
- 110. 25
25
#box{
position:
absolute;
top:
25px;
left:
25px;
}
#container{
position:
relative;
}
- 113. What type of positioning should the
outer container be?
- 114. What type of positioning should the
outer container be?
relative!
- 115. What type of positioning should
content inside the container be,
when you want to position it?
- 116. What type of positioning should
content inside the container be,
when you want to position it?
absolute!
- 119. •
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.
- 120. 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;
}
- 121. 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;
}
- 123. Which element will display
on top of the other?
#blue{
position:
relative;
z-‐index:
55;
}
#red{
position:
absolute;
z-‐index:
45;
}
- 124. Which element will display
on top of the other?
#blue{
position:
relative;
z-‐index:
55;
}
#red{
position:
absolute;
z-‐index:
45;
}
#blue!
- 125. Which element will display
on top of the other?
.bluebox{
position:static;
z-‐index:
55;
}
#bluebox{
position:
relative;
z-‐index:
45;
}
- 126. Which element will display
on top of the other?
.bluebox{
position:static;
z-‐index:
55;
}
#bluebox{
position:
relative;
z-‐index:
45;
}
#bluebox!
- 128. Exercise
.box{
width:300px;
height:300px;
border:1px
solid
black;
}