Unit III: Adding Stylesand Interactivity Using  CSS and Javascript
What is the CSS properties being describe by the statement.1.    Insert image as background.2.    Insert foreground color....
 The CSS Margin properties set the space around elements while padding properties set the space between the element borde...
Top/bottom                          margin              paddingLeft margin                        right margin
PROPERTY         DESCRIPTION                   EXAMPLEmargin-top     Sets the top margin    Body{margin-top: 75px;}       ...
PROPERTY              DESCRIPTION                       EXAMPLEpadding-top      Sets the distance between        Body{padd...
USE HEADER 1 AS SELECTOR1. Set the top margin to 20 pixels2. Set the right margin to 10 pixels3. Set the bottom margin to ...
1.  h1{margin-top: 20px;}2. h1{margin-right: 10px;}3. h1{margin-bottom: 20px;}4. h1{margin-left: 10px;}5. h1{margin: 20px ...
Css margin and padding property
Upcoming SlideShare
Loading in …5
×

Css margin and padding property

707 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
707
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Css margin and padding property

  1. 1. Unit III: Adding Stylesand Interactivity Using CSS and Javascript
  2. 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 left7. Applies underline to text.8. Specifies spacing between text9. Capitalized the letter of each word.10. Set the font face to Algerian.REVIEW
  3. 3.  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
  4. 4. Top/bottom margin paddingLeft margin right margin
  5. 5. PROPERTY DESCRIPTION EXAMPLEmargin-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.
  6. 6. PROPERTY DESCRIPTION EXAMPLEpadding-top Sets the distance between Body{padding-top: 75px;} the top border and the Body{margin-top: 50%;} content of an elementpadding-right Sets the distance between Body{margin-right: 50px;} the right border and the Body{margin-right: 80%;} content of an elementpadding-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 elementpadding Sets all padding properties in Body{ margin: 75px 50px one declaration; but follows 20px} arrangement of values from, top, right, bottom, and left.
  7. 7. USE HEADER 1 AS SELECTOR1. Set the top margin to 20 pixels2. Set the right margin to 10 pixels3. Set the bottom margin to 20 pixels4. Set the left margin to 10 pixels5. Set all the margins in one declaration.6. Set the top padding to 20 percent7. Set the right padding to 10 percents8. Set the bottom padding to 20 percents9. Set the left padding to 10 percents10. Set all the paddings in one declarationCOMPUQUIZ/EXERCISES
  8. 8. 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

×