TODO BEFORE
Preparation before next session
Read this great article about Box Model
Article about Box Model
Watch this great video about Box Model
video about Box Model
Read this great article about CSS Units
Article about CSS UNITS
WEB DESIGN
W3-S1 – Box Model & Units
Course Objectives
BOX MODEL
✓ Make the difference between block and inline elements
✓ Understand and manipulate the Box Model (Margin, Padding Border)
✓ Understand the Box Sizing modes to compute object dimensions
UNITS
✓ Understand the main types of units in web design
BLOCK VS INLINE
EXPLAIN
Block VS Inline Elements
Block Elements Inline Elements
✓ Always starts on a new line ✓ Stay on the same line
✓ Always takes up the full width ✓ Only takes up as much width as necessary
E1 E1 E2 E3
E2
E3
EXPLAIN
Block VS Inline Elements
Here are some bock and inline elements
Block Elements Inline Elements
<p> <span>
<div> <a>
<main> <i>
<section> <img>
<table> <input>
<nav> <q>
<ul>
<ol>
<li>
EXPLAIN
Change the Display property
You can change an element's display type using the display attribute
<ul> li { li {
<li>HOME display: block display: inline
<li>NEWS } }
<li>HELP
</ul> HOME
NEWS
HOME NEWS HELP
HELP
Create a horizontal menu by setting LI elements with an inline display
EXPLAIN
The box model
The CSS box model is a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content
Which diagram refers to paddings?
1 2
Which diagram refers to paddings?
1 2
ACTIVITY
10 MIN
Activity 1
Look at the provided code and evaluate the margins, paddings and border of elements
✓ Open Dev Tools on Chrome
✓ Select an element
✓ Show the box model debugger
The box model debugger
EXPLAIN
The box model attributes
Margin Border Padding
p { div { div {
margin-top: 100px; border-style: solid; padding-top: 50px;
margin-bottom: 100px; border-width: 5px; padding-right: 30px;
margin-right: 150px; } padding-bottom: 50px;
margin-left: 80px; padding-left: 80px;
} }
EXPLAIN
The box model attributes
1 - TOP
TOP RIGHT BOTTOM LEFT
p {
margin: 20px 30px 40px 50px ;
}
4 - LEFT 2 - RIGHT 20
30
50
3 - BOTTOM 40
ACTIVITY
10 MIN
Activity 2
Create 3 Boxes following given constraints:
CONSTRAINTS
• Divs width and height : 200px
• Divs Background color : follow mockup
• Divs shall be displayed corner to corner
• Div 1 : padding 20px, border 10px
• Div 2 : top and bottom border 20px, left and right border 10px
• Div 3 : border of 10px
PRACTICE
Calculate an element total size
10 MIN
To calculate the full size of an element, you must take into account
• height width
• paddings
• margins
• borders
Total width
div {
margin : 20px 20px 10px 50px;
border : 10px solid black;
padding : 20px;
height : 100px; Total
width : 400px
} height
Compute the total width and height, given the above code
QUIZ
What will the total width of this element ?
Total width
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
A 200px B 220px C 230px D 260px
What will the total width of this element ?
Total width
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
A 200px B 220px C 230px D 260px
200 + 2*10 + 2*20
EXPLAIN
What is Box Sizing ?
Box sizing defines from where the browser is going to measure an objects size
content-box border-box
(default value)
200 px
260 px
140 px
200 px
width: 200px;
width: 200px;
padding: 20px;
padding: 20px;
border: 10px;
border: 10px;
box-sizing: border-box;
box-sizing: content-box;
• Total width = 260px (200px + 20px + 20px + 10px + 10px) • Total width = 200px
• Content width = 200px • Content width = 140px (200px - 20px - 20px - 10px - 10px)
EXPLAIN
CSS Units
Percentage based Font based Viewport based
EXPLAIN
Percentage based unit
The length is relative to its immediate parent element size.
50 %
EXPLAIN
Font based units
rem unit em unit
The length is relative to the The length is relative to the
root element font size parent element font size
EXPLAIN
Viewport based units (vh, vw)
The viewport is the user's visible area of a web page
div {
height: 100vh
}
100vh is equal to 100% of the height of the viewport
div {
width: 50vw
}
50 vw is equal to 50% of the width of the viewport
RESEARCH
Research Assessment
Before session C3-S4, make researches regarding the bellow topics:
TOPIC 1 - when should we use absolute units ?
TOPIC 2 - when should we use font based units ?
TOPIC 3 - when should we I use viewport units ?
Behavior of units when zooming
Expected outcome
- Different uses cases where each unit is more appropriate
- Illustration of each case with some code
Tips
- Consider accessibility, multiple device, responsivity etc.…
Congratulations !
You should now master those concepts
BOX MODEL
✓ Make the difference between block and inline elements
✓ Understand and manipulate the Box Model (Margin, Padding Border)
✓ Understand the Box Sizing modes to compute object dimensions
UNITS
✓ What are the main types of units in web design
WRAPPING THE LESSON
3-2-1 Challenge
✓ List three things you learned today.
✓ List two questions you still have.
✓ List one aspect of the lesson or topic you enjoyed.
TODO AFTER
After this session
1 - Review the theory 2 - Work on your Research assessment
✓ Review the Box Model ✓ Presentations on C3-S4 !
✓ Review CSS units
