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