Lesson Practice 6-1:
Using Padding, Borders, and Margins

Task 1 - Using Padding Properties with Absolute Values

1. Open a nocss.htm in Notepad++.  Immediately Save the file in your CSS folder as box1.htm.
   
   
2. In the title element, add the title: Using Padding Properties with Absolute Values
   
   
3. Add an embedded style sheet.
   
   
4. Add an h2 header to the top of the page with the same text as in the title.
   
   
5. Create and a apply a class to center the h2 header.
   
   
6. Add a rule to make the h3 elements have a background color using the value #c0c0c0 a black text color.
   
   
7. Add a rule to make the paragraph elements have a background color value #CCFFFF and text color #000066.
   
   
8. Add a class rule named .padleft and create a declaration to set left padding to 25 pixels.
   
   
9. Add a class rule named .padleftright and create declaration(s) to set left and right padding to 25 pixels each.
   
   
10. Add a class rule named .padtopleftright and create declaration(s) to set left and right padding to 25 pixels each and the top padding to 10 pixels.
    
    
11. Add a class rule named .padall and create declaration(s) to set left and right padding to 25 pixels each, top padding to 10 pixels and bottom padding to 20 pixels.
    
    
12. Apply the padleft class to the h3 headings, the padleftright rule to the first paragraph, the padtopleftright class to the second paragraph, and the padall class to the third paragraph.
    
    
13. Preview the file to see the effects. If any property does not work properly, trouble-shoot to fix it.
    
    
14. Save the file again.

Task 2 -Using Padding Properties with Relative Values

1. Open a nocss.htm in Notepad++.  Immediately Save the file in your CSS folder as box2.htm.
   
   
2. In the title element, add the title: Using Padding Properties with Relative Values
   
   
3. Add an embedded style sheet.
   
   
4. Add a centered h2 header to the top of the page with the same text as in the title.
   
   
5. Add a rule to make the h3 elements have a padding of 1 em on all sides and a light background color.
   
   
6. Add a class rule named .empad and add a declaration to make the padding 1 em on all sides and a light background color.
   
   
7. Add a class rule named .pctpad5 and add a declaration to make the padding 5% on all sides and a light background color.
   
   
8. Add a class rule named .pctpad10 and add a declaration to make the padding 10% on all sides and a light background color.
   
   
9. Apply the empad class to the first paragraph, pctpad5 to the second paragraph, and pctpad10 to the third paragraph.
   
   
10. Preview the file to see the effects. Notice that the 1em for the headings and the 1em for the paragraph are different widths. The padding width is relative to the size of the font used in the elements.
    The % values are taken from the width of the page - 10% padding is 10% of the width of the page.
    
    
11. Change the size of your preview window to see the that the size of the padding, while still remaining in the same proportions.
    
    
12. If any property does not work propertly, trouble-shoot to fix it.
    
    
13. Save the file again.

Task 3 - Using Margin Properties

1. Open a box1.htm in Notepad++.  Immediately Save the file in your CSS folder as box3.htm.
   
   
2. In the title element, change the text to read: Using Margin Properties
   
   
3. Change the text in the h2 header at the top of the page to the same text as in the title.
   
   
4. To the h3 rule, add a declarations to create left and right margins of 25 pixels each.
   
   
5. To the padleftright, padtopleftright, and padall class rules, add declarations to create left and right margins of 40 pixels each, and a top and bottom margins of 10 pixels each.
   
   
6. In the padall class rule, change the declaration to add 20 pixels of margin to the top and bottom.
   
   
7. Preview the file to see the effects.
   Notice that the background color is moved inward where a margin was added. The 'visible width' of the box is the area where there is background color.
   
   
8. If any property does not work properly, trouble-shoot to fix it.
   
   
9. Save the file again.

Task 4 - Using Padding and Margins with Lists

1. Open text4.htm in Notepad++.  Immediately Save the file in your CSS folder as box4.htm.
   
   
2. In the title element, add the title: Using Padding and Margin Properties with Lists
   
   
3. Change the text in the h2 header at the top of the page to the same text as in the title.
   
   
4. Add a rule for the ul tag to make the background color lightyellow and the text darkblue, the left padding 25 pixels and the left margin 15 pixels.
   
   
5. Add a rule for the ol tag to make the background color lightgreen and the text darkblue, the left padding 15 pixels and the left margin 25 pixels.
   
   
6. Preview the file to see the effects. If any property does not work correctly, trouble-shoot to fix it.
   
   
7. Save the file again.

Task 5 - Using Border Properties

1. Open a box3.htm in Notepad++.  Immediately Save the file in your CSS folder as box5.htm.
   
   
2. In the title element, add the title: Using Border Properties
   
   
3. Change the text in the h2 header to the top of the page to the same text as in the title.
   
   
4. To the padleftright class, add a top and bottom border that is thin, solid and darkgray, and a left and right border that is medium, double and darkred.
   
   
5. To the padtopleftright class, add a border style dashed on the left and right, solid on the top and bottom, a border thickness of thin on the top, medium on the left and right, and thick on the bottom, and border colors of your choice, different on all four sides..
   
   
6. To the padall class, add a single declaration to make all four borders groove, thick and darkgreen.
   
   
7. Preview the file to see the effects. If any property does not work properly, trouble-shoot to fix it.
   
   
8. Create a class rule named .divborder with declarations to make a margin on all four sides of 10 pixels, padding of 10 pixels, and a border that is 10 pixels wide, ridge style, and darkblue.
   
   
9. Add a div element to enclose all three h3 elements and the three paragraphs. Apply the divborder style to the div element.
   
   
10. Preview the file to see the effects. Notice that the margins and padding you applied to the elements inside the div are still in effect, but now they begin inside the div element, as its box content.
    
    
11. Save the file again.