June 12, 2005

June Meeting Notes: Styling Boxes

At our June meeting, we went continued our discussion on the box model by looking at ways to style boxes. At our May meeting, we had talked about height and width. We reviewed that topic and then went through borders, margins, and padding.

I used a couple of sample pages to illustrate the options, and I have uploaded them here with comments in the source. The first page is a sample of the values for the border property. Download this file and play with the source. You will see comments that will help you. Open the file in different browsers to see how they render borders.

The second page is an illustration of using margins or padding. The set off paragaphs look the same until you go to the source and add background color to the content.

At our next meeting, we will finish on this topic by running through the styling of inline elements.