Box Activity

Back to Calendar

Today you will be working with the Box Model of design. We will be continuing the file we created together last time. Work through each step and think about what is happening. Much of what we did last time and what do today will be used for the rest of the semester.

  1. Open your "html-basic" file in Notepad++
  2. save as "div-practice.html"
  3. Create 3 "divs" in the body (like we did in 3-boxes)
  4. Add a style section -- with background color for divs
  5. Add the following to your "div" style -- margin: 10px;
  6. Notice what happened.
  7. Now add the following to your "div" style -- height: 100px;
  8. Save - Refresh -- Notice what happened.
  9. Now add the following to your "div" style -- padding: 15px;
  10. Save - Refresh -- Notice what happened.
  11. Look at this page to get a better idea of how this all goes together -- it is what is known at the "CSS Box Model"
  12. Now put h3 tags around the text in each div.
  13. Go to your style section -- add a style area for h3
  14. Change h3 so that text is white, larger than a regular h3, and center aligned.
  15. Save - Refresh -- Notice what happened.
  16. Add another div that goes around the other three divs (open tag goes right after the body tag - the close will go right before the close of the body)
  17. Don't put an additional text in this div
  18. Apply an id of "wrapper" to this div
  19. Define the css for this id -- height: 500px; width: 750px; background-color: gray;
  20. Save - Refresh -- Notice what happened.
  21. With margin - you can control margin of each side of the div. Change margin in your css to margin-left. Notice what happens. Now change to margin-right, then to margin-top, finally margin-bottom. Look at each as you do it.
  22. Just like margin - you also have control over padding. Try replacing padding with padding-top, padding-bottom, padding-left, padding-right. (this might be hard to see - you might replace the text in the div with a long sentence to see how this works.
  23. Look at w3Schools for more information about margins, padding, and box model.