The document discusses CSS margin and padding properties, describing what each property controls for positioning elements on a page. It provides examples of how to set the top, right, bottom, and left margins and padding individually or together. There is also an exercise asking to apply various margin and padding properties to an h1 selector.

1. Unit III: Adding Styles
and Interactivity Using
CSS and Javascript

2. What is the CSS properties being describe by the
statement.
1. Insert image as background.
2. Insert foreground color.
3. Set the font to inclined.
4. Set the font to bold.
5. Applies first line indent.
6. Set the text to the left
7. Applies underline to text.
8. Specifies spacing between text
9. Capitalized the letter of each word.
10. Set the font face to Algerian.
REVIEW

4.  The CSS Margin properties
set the space around
elements while padding
properties set the space
between the element border
and the element content.
CSS MARGIN AND PADDING
PROPERTIES

5. Top/bottom
margin
padding
Left margin
right margin

6. PROPERTY DESCRIPTION EXAMPLE
margin-top Sets the top margin Body{margin-top: 75px;}
of an element Body{margin-top: 50%;}
margin-right Sets the right margin Body{margin-right: 50px;}
of an element Body{margin-right: 80%;}
margin- Sets the bottom Body{margin-bottom: 20px;}
bottom margin of an element Body{margin-bottom: 50%;}
margin-left Sets the left margin Body{margin-left: 50px;}
of an element Body{margin-left: 80%;}
margin Sets all margin Body{ margin: 75px 50px
properties in one 20px}
declaration; but
follows arrangement
from, top, right,
bottom, and left.

7. PROPERTY DESCRIPTION EXAMPLE
padding-top Sets the distance between Body{padding-top: 75px;}
the top border and the Body{margin-top: 50%;}
content of an element
padding-right Sets the distance between Body{margin-right: 50px;}
the right border and the Body{margin-right: 80%;}
content of an element
padding-bottom Sets the distance between Body{margin-bottom:
the bottom border and the 20px;}
content of an element Body{margin-bottom:
50%;}
padding-left Sets the distance between Body{margin-left: 50px;}
the left border and the Body{margin-left: 80%;}
content of an element
padding Sets all padding properties in Body{ margin: 75px 50px
one declaration; but follows 20px}
arrangement of values from,
top, right, bottom, and left.

8. USE HEADER 1 AS SELECTOR
1. Set the top margin to 20 pixels
2. Set the right margin to 10 pixels
3. Set the bottom margin to 20 pixels
4. Set the left margin to 10 pixels
5. Set all the margins in one declaration.
6. Set the top padding to 20 percent
7. Set the right padding to 10 percents
8. Set the bottom padding to 20 percents
9. Set the left padding to 10 percents
10. Set all the paddings in one declaration
COMPUQUIZ/EXERCISES

9. 1. h1{margin-top: 20px;}
2. h1{margin-right: 10px;}
3. h1{margin-bottom: 20px;}
4. h1{margin-left: 10px;}
5. h1{margin: 20px 10px 20px 10px;}
6. h1{padding-top: 20%;}
7. h1{padding-right: 10p%;}
8. h1{padding-bottom: 20%;}
9. h1{padding-left: 10%;}
10. h1{padding: 20% 10% 20% 10%;}
ANSWER