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) www.profburnett.com

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

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

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

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

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

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

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

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

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

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

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

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

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