1. ITI 133: HTML5 Desktop and Mobile Level I
Session 3 - Chapter 5 How to Use the CSS Box Model for Spacing, Borders, and Backgrounds
Before Class Activities
Set Up Dreamweaver Development Environment
Download Student Exercise file to the Desktop
Unzip Exercise files to Developmental Folder
Download and Print Class Presentations for Notes (Optional)

2. Copyright © Carl M. Burnett
Class Outline
Student Exercise 1
Intro to CSS Box Model
Size and Space Elements
How to Set Borders and Backgrounds
7/5/2019
Copyright © Carl M. Burnett

3. Copyright © Carl M. Burnett
Student Exercise 1
Complete Exercise 4-1, page 160
Students will upload test files to live site.
Students will preview in browser test files.
Download link for files for Exercise 4-1 on website
7/5/2019
Copyright © Carl M. Burnett

4. Copyright © Carl M. Burnett
Chapter 5 How to Use the CSS Box Model for Spacing, Borders, and Backgrounds
7/5/2019
Copyright © Carl M. Burnett

5. Copyright © Carl M. Burnett
Intro to CSS Box Model
TOP
Margin
Border
LEFT
Padding
RIGHT
This is the content area for the block element. It is the basis for the width and height properties.
height
width
BOTTOM
7/5/2019
Copyright © Carl M. Burnett

6. Formula to Calculate Height and Width
Height – top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
Width – right margin + right border + right padding + width + left padding + left border + left margin
7/5/2019
Copyright © Carl M. Burnett

7. Size and Space Elements
Properties for height and width
width – Relative or Absolute Value
height - Relative or Absolute Value
min-width - Relative or Absolute Value
min-height – Relative or Absolute Value
max-width - Relative or Absolute Value
max-height - Relative or Absolute Value
7/5/2019
Copyright © Carl M. Burnett

8. Size and Space Elements
Properties for Setting Margins
margin – One of four relative or absolute values
margin-top
margin-bottom
margin-right
margin-left
Shorthand: margin:25px 50 px 35px 110px;
7/5/2019
Copyright © Carl M. Burnett

9. Size and Space Elements
Properties for Setting Padding
padding– One of four relative or absolute values
padding-top
padding-bottom
padding-right
padding-left
7/5/2019
Copyright © Carl M. Burnett

10. Copyright © Carl M. Burnett
How to Set Borders
Properties for Setting Borders
border – all sides
border-side: width, style and color
border-width: one of four relative or absolute values
border-style: Keyword- dotted, dashed, etc.
border-color: one of four color values for each side
border-side-width: one of four relative or absolute values
border-side-style: Keyword
border-side-color: color value
7/5/2019
Copyright © Carl M. Burnett

11. How to Set Border Rounded Corners and Shadows
border-radius: radius; All four corners
border-radius: topLeft | topRight | lowerRight | lowerLeft
box-shadow: horizontalOffset | verticalOffset | blurRadius | spread | color
7/5/2019
Copyright © Carl M. Burnett

12. Copyright © Carl M. Burnett
How to Set Backgrounds
Properties for Background Color and Image
background: color | image | repeat | attachment | position value
background-image: Relative or Absolute URL
background-repeat: Keyword
background-attachment: Keyword
background-position: Relative or Absolute Value
How to Set Background Gradients
7/5/2019
Copyright © Carl M. Burnett

13. Copyright © Carl M. Burnett
Student Exercise 2
Complete Exercise 5-1 and 5-2 on page 193 using Dreamweaver.
Download link for files for Exercise 5-1 on website.
Upload your HTML page and CSS files to the live site to preview.
7/5/2019
Copyright © Carl M. Burnett

14. Class Review Intro to CSS Box Model Size and Space Elements
How to Set Borders and Backgrounds
Next – Session 3
Chapter 6 - How to Use the CSS for Page Layout
7/5/2019
Copyright © Carl M. Burnett