Cascading Style Sheets: Block Level Tags

Reading Chapter 6

Many HTML tags mark chunks of the document. Some tags that fit, more or less, this description are: The header tags, paragraphs, lists, list items, div, the body, images and the HR tag (really?).

The browser lays out the display based on the tags it sees. These tags are positioned as if their contents are in a box and the box is placed on the display as a whole. We can control the position of the box and a number of its properties using CSS. Remember, that inside these block level tags, there can be other blocks. By controlling the shape and position of these boxes, we get very fine layout control, much better than we have just using tables. First, let's look at the parts of a box.

Figure 7-57 from the text

Within this whole box, there are some inner boxes and at the center is the box that hold the content of the tag. This could have boxes inside it as well. So all boxes are inside another box. If nothing else, they are inside the box that is the body tag, which itself is inside the browser window.

The outermost part is the margin. This separates the block from the one that surrounds it. Then there is the border around the contents and padding between the border and the contents. The entire page display is many nested boxes. Here is a picture from the book of what some of the boxes in part of a page look like. Figure 7-58 from the text

We have CSS properties to control each of the parts of the box that makes up a block level tag. There are 4 spacing properties for the margins and padding. Shows spacing properties for boxes

The margin and padding values can be in the normal length units of inches, mm, pixels, points, etc. You can also use a percentage of the size of the surrounding box. The border properties have 3 versions. The width and color can be set using the usual values. Each border can have a style which is the kind of line that is drawn for that border. Here are some examples of border styles taken from the book. Figure 7-61 from the text

You can set the width and height of the box as a whole. The width property takes the usual length values or a percentage. The height takes a length unit but not percentages. After all, what is 50% of the length of a web page? The height is usually not set because it is not clear what happens if the size of the content doesn't fit in the space? Generally use the width setting only on blocks of text or images. Remember, the width is that of the entire box. The space for the contents is what is left after you subtract the margins, borders and padding.

The float property is like the align attribute on images. It causes the box to 'float' to the left or right margin of the surrounding or parent box. Then the next box of stuff on the page is brought up and formatted to fit in the space next to the floating box. It appears to wrap around the floater. If we don't want the next box to do this, we can set the clear property to values of right and left, just like the float property. It should be set to the same value as the floater. This forces the following box to be below the floater. The space next to the floater is left blank. Here are a couple of pictures to illustrate this. Figure 7-66 from the text Figure 7-67 from the text