ISTA 230 Introduction to Web Design (Spring 2017)

The Box Model

As discussed in lecture, block elements are made up of content, padding, a border, and a margin. Below is an image which demonstrates this:

Box Model

Using your understanding of block elements, recreate the image above using four nested <div> elements. Use the border, padding, margin, and background-color CSS properties to style the four nested elements. All necessary files can be downloaded here.

When finished, you'll want to validate your CSS to ensure that it is valid. Use the W3C CSS Validator (found at http://jigsaw.w3.org/css-validator/#validate_by_input) to validate the contents of your CSS file. Remember, we're using CSS 2.1, NOT CSS 3! You'll need to be sure and select the 'More Options' tab for the CSS validator to ensure that you're not using the CSS 3 profile when you validate!

Once you have completed all of the above, check in with your section leader to ensure that you receive full credit for attending this lab section.

Solution

Solution can be downloaded here.