wwwprofburnettcom HTML5 Level I Class Outline Intro to CSS Box Model Size and Space Elements How to Set Borders and Backgrounds Student Exercise 1 9192016 Copyright Carl M Burnett 2 ID: 723791
Download Presentation The PPT/PDF document "Session III Chapter 5 - How to Use the ..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Session III Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgroundswww.profburnett.com
HTML5
Level ISlide2
Class OutlineIntro to CSS Box ModelSize and Space ElementsHow to Set Borders and BackgroundsStudent Exercise 1
9/19/2016
Copyright © Carl M. Burnett
2Slide3
Border
Intro to CSS Box Model
9/19/2016
Copyright © Carl M. Burnett
3
Padding
<h1>This is a Heading</h1>
Margin
width
height
TOP
BOTTOM
RIGHT
LEFT
This is the content area for the block element.
It is the basis for the width and height properties. Slide4
Formula to Calculate Height and WidthHeight – top margin + top border + top padding + height + bottom padding + bottom border + bottom marginWidth – right margin + right border + right padding + width + left padding + left border + left margin
9/19/2016
Copyright © Carl M. Burnett
4Slide5
Size and Space ElementsProperties for height and widthwidth – 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
9/19/2016
Copyright © Carl M. Burnett5Slide6
Properties for Setting Marginsmargin – One of four relative or absolute valuesmargin-top
margin-bottom
margin-right
margin-left
Shorthand:
margin:25px 50px 35px 110px;
Size and Space Elements
9/19/2016
Copyright © Carl M. Burnett
6
Top
Right
Bottom
LeftSlide7
Size and Space ElementsProperties for Setting Paddingpadding– One of four relative or absolute values
padding-top
padding-bottom
padding-right
padding-left
9/19/2016
Copyright © Carl M. Burnett
7Slide8
How to Set BordersProperties for Setting Bordersborder – 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 value9/19/2016
Copyright © Carl M. Burnett8Slide9
How to Set Border Rounded Corners and Shadowsborder-radius: radius; All four corners
border-radiu
s:
topLeft
|
topRight | lowerRight
|
lowerLeft
box-shadow
: horizontalOffset | verticalOffset |
blurRadius | spread | color
9/19/2016Copyright © Carl M. Burnett
9Slide10
How to Set BackgroundsProperties for Background Color and Imagebackground: 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
9/19/2016
Copyright © Carl M. Burnett10Slide11
Student Exercise 4Complete Exercise 5-1 and 5-2 on page 197 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.
9/19/2016
Copyright © Carl M. Burnett
11Slide12
Class ReviewIntro to CSS Box ModelSize and Space ElementsHow to Set Borders and Backgrounds9/19/2016
Copyright © Carl M. Burnett
12
Next – Session III
Chapter 6 - How to Use the CSS for Page Layout