Box Model Assignment

  1. Create a new folder and name it yourlastname_K07
  2. Create a new html file and name it yourlastname_K07.html and put it into the folder you just made.
  3. Create a new css file and name it yourlastname_K07.css and put it into the folder you just made.
  4. Define all your css in the .css file.
  5. Create a div tag and put one paragraph of Lorem Ipsum text in it.
  6. Give it an id attribute of boxA
  7. Copy the div you just made and paste it directly underneath the first div.
  8. Do that a third time.
  9. You ought to have three divs, in a stack, one right under the other in the code.
  11. Give the additional div's id's of boxB and boxC.
  12. Put a horizontal rule between each div.
  13. Apply the following to boxA:
    • Width of 50%
    • Center it horizontally with a 15px margin top and bottom.
    • Background color of #FFD
    • Border on all four sides of: 5px wide, dashed, color: #F4A460
    • Padding of 1.5em on all sides.
    • Justify the text.
  14. Apply the following to boxB:
    • Width of 25em
    • Border top and bottom only: color of darkslategray, 10 pixel thickness, double border.
    • Background color of #DFF
    • Padding of 20px left and right, 2em top and bottom.
    • Margin of 2em on top, right and left sides, 20px bottom.
  15. Apply the following to boxC:
    • Margins of 500px left, 150px right, 2em top, and 1em bottom.
    • No width.
    • Ridge border, 1em thick, color: lightsalmon on all four sides.
    • Padding of 30 pixels on all sides.
    • Background color of burlywood.
  16. Please zip the folder and send it to me.

Your results should look something like this, only twice the size and without the thick boundary surrounding them all:

Box model assignment result