Box Model Assignment
-
K07a - no video - please follow written instructions below
- Create a new folder and name it yourlastname_K07
- Create a new html file and name it yourlastname_K07.html and put it into the folder you just made.
- Create a new css file and name it yourlastname_K07.css and put it into the folder you just made.
- Define all your css in the .css file.
- Create a div tag and put one paragraph of Lorem Ipsum text in it.
- Give it an id attribute of boxA
- Copy the div you just made and paste it directly underneath the first div.
- Do that a third time.
- You ought to have three divs, in a stack, one right under the other in the code.
- Give the additional div's id's of boxB and boxC.
- Put a horizontal rule between each div.
- 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.
- 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.
- 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.
- 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: