HTML + CSS
Quiz Time!
Block vs Inline
<div class="box"></div>
<style>
.box {
display: block;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="box"></div>
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
Block vs Inline
Floats
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1, .box2 {
width: 100px;
height: 100px;
background: red;
}
.box1 {
}
.box2 {
float: right;
}
</style>
Floats
1
2
2
Floats: Inlining
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1, .box2 {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
.box1 {
}
.box2 {
float: right;
}
</style>
Floats
1
2
2
Floats
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1, .box2 {
width: 100px;
height: 100px;
background: red;
}
.box1 {
float: right
}
.box2 {
float: right;
}
</style>
Floats
1
2
2
1
Floats
1
2
2
3
3
Floats: Clearing
<div class="box1"></div>
<div class="box2"></div>
<style>
.box1, .box2, .box3 {
width: 100px;
height: 100px;
background: red;
}
.box1 {
}
.box2 {
float: right;
}
.box3 {
clear: both
}
</style>
Relative Positioning
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
.block1, .block2, .block3 {
width: 100px;
height: 100px;
padding: 10px;
}
.block1 {
background-color: green;
}
.block2 {
background-color: red;
position: relative;
left: 50px;
top: 10px;
}
.block3 {
background-color: blue;
}Relative Positioning
1
2
3
2
Inheritance
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
div {
border: 10px solid black;
margin: 10px;
padding: 10px;
}
.block1, .block2, .block3 {
width: 100px;
height: 100px;
padding: 10px;
}
.block1 {
background-color: green;
}
.block2 {
background-color: red;
}
.block3 {
background-color: blue;
}shoutkey.com/been
shoutkey.com/say
div@northwestern.edu
Inheritance
1
2
3
Position: Relative
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.container {
position: relative;
border: 10px solid black;
}
.block1, .block2, .block3 {
width: 100px;
height: 100px;
padding: 10px;
}
.block1 {
background-color: green;
}
.block2 {
background-color: red;
}
.block3 {
background-color: blue;
}Position: Relative
1
2
3
Position: Absolute
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
.container {
position: relative;
border: 10px solid black;
}
.block1, .block2, .block3 {
width: 100px;
height: 100px;
padding: 10px;
position: absolute;
}
.block1 {
background-color: green;
}
.block2 {
background-color: red;
}
.block3 {
background-color: blue;
}Position: Absolute
1
2
3
3
The Box Model
Padding
Border
Margin
Intro to HTML + CSS
By shortdiv
Intro to HTML + CSS
- 659
