1. Box model, spacing, borders, backgrounds
Chapter 5

2. Learning Outcomes Applied
Given an HTML document, create CSS rule sets that use the CSS box model to apply spacing, borders, and backgrounds to the web page.
Knowledge
Describe the use of the CSS box model.
Explain how the CSS box model can be used to control the spacing between the headings and paragraphs on a page.
Describe the effect of “collapsed margins”.
Describe the use of a reset selector.
Describe these properties for a block element in a box model: height, width, margin, padding, border, background color, and background image.
Describe these CSS3 features for formatting boxes: rounded corners, shadows, background gradients.

3. The Box Model Content Padding Border Margin
Text & web page elements in the container
Padding
Area between the content and the border
Border
Between the padding and the margin
Margin
Determines the empty space between the element and adjacent elements

4. Calculating Width and Height of Elements
The formula for calculating the height of a box
top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin
The formula for calculating the width of a box
left margin + left border + left padding + width +
right padding + right border + right margin

5. Configure Content Width and Content Height with CSS
width property
Configures the width of an element’s content h1 { width: 80%; }
min-width property
Configures minimum width of an element
max-width property
Configures the maximum width of an element
height property (generally used ONLY for images!)
Configures the height of an element h1 { height: 100px; }
Look at previous slide again – these amounts are not representative of the ENTIRE width and height of elements; they only represent the content itself!

6. Configure Margin with CSS
The margin property
Related properties:
margin-top, margin-right, margin-left, margin-bottom
Configures empty space between the element and adjacent elements
Syntax examples
h1 { margin: 0; }
h1 { margin: 20px 10px; }
h1 { margin: 10px 30px 20px; }
h1 { margin: 20px 30px 0 30px; }

7. Using margin: auto to Center Page Content
body { margin: 1em auto; width:80%; }

8. Configure Padding with CSS
The padding property
Related properties:
padding-top, padding-right, padding-left, padding-bottom
Configures empty space between the content of the HTML element (such as text) and the border
Syntax examples
h1 { padding: 0; }
h1 { padding : 20px 10px; }
h1 { padding : 10px 30px 20px; }
h1 { padding : 20px 30px 0 30px; }

9. CSS border
Configures a border on the top, right, bottom, and left sides of an element
Consists of
border-width
border-style
border-color
h2 { border: 2px solid #ff0000 }

10. Browser Display Can Vary

11. Configuring Specific Sides of a Border
Use CSS to configure a line on one or more sides of an element
border-bottom
border-left
border-right
border-top
h2 { border-bottom: 2px solid #ff0000 }

12. CSS3 Rounded Corners border-radius property Example:
h1 { border: 1px solid #000033;
border-radius: 15px; }

13. CSS3 box-shadow
Configure the horizontal offset, vertical offset, blur radius, and valid color value
Example:
main { box-shadow: 5px 5px 5px #828282;}
Note: Optional keyword: inset

14. CSS background-color Configures a background color
Remember that the background of an element is the total size of the element, including padding and border (but not the margin).
body { background-color: #EEE; }

15. CSS background-image Configures a background-image
By default, background images tile (repeat)
body { background-image: url("../images/background1.gif"); }

16. CSS background-repeat

17. Using background-repeat
trilliumbullet.gif:
h2 { background-color: #d5edb3; color: #5c743d; padding-left: 30px; background-image: url("../images/trilliumbullet.gif"); background-repeat: no-repeat; }

18. CSS background-position
Configures the starting position a background
First value represents horizontal position
Second value represents vertical position
By default, backgrounds are positioned left top
background-position: left top; /* 0% from left, 0% from top */
background-position: center top; /* centered horizontally, 0% from top */
background-position: 90% 90%; /* 90% from left, 90% from top */
background-attachment: scroll; /* image moves as you scroll */
background-attachment: fixed; /* image does not move as you scroll */

19. CSS background-attachment
Sets whether a background image is fixed or scrolls with the rest of the page.
By default, backgrounds are fixed
background-attachment: scroll; /* image moves as you scroll */
background-attachment: fixed; /* image does not move as you scroll */

20. CSS3 Background Image background-clip background-origin
confines the display of the background image
background-origin
positions the background image relative to the content, padding or boder
background-size
can be used to resize or scale the background image

21. CSS3 Multiple Background Images
body { background-color: #f4ffe4; color: #333333; background-image: url(trilliumgradient.png); background: url(trilliumfoot.gif) no-repeat bottom right, url(trilliumgradient.png); }

22. CSS3 Gradients
Gradient: a smooth blending of shades from one color to another
Use the background-image property
linear-gradient()
radial-gradient()
Example:
background-color: #8FA5CE;
background-image: -webkit-linear-gradient(top, #FFFFFF, #8FA5CE);
background-image: -moz-linear-gradient(top, #FFFFFF, #8FA5CE);
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#FFFFFFFF, endColorstr=#FF8FA5CE);
linear-gradient(#FFFFFF, #8FA5CE);