The Box Model in CSS

As you've seen, the box model is the basic principle by which CSS organizes and styles elements on a web page. To really get to understand CSS principles takes time and experience.

By Friday develop the index page we started on Wednesday's demo. Use it as the homepage for your subdomain site. It should contain the following (see my attached image):

• 2 rows of boxes, 3 in the first and 2 in the second.
• The square boxes should be 250 x 250 pixels.
• There should be 30 pixels of space between the elements.
• Box 1: your name, graphic design
• Box 2: design example
• Box 3: design example
• Box 4: image of you
• Box 5: 2 paragraphs about you!
• Black background
• White box borders

Upload them to your new server space!



Further reading about CSS:

http://www.alistapart.com/articles/outsidethegrid/
http://www.brainjar.com/css/positioning/default.asp
http://redmelon.net/tstme/box_model/
http://www.w3.org/TR/CSS2/box.html