9.0 Element Size

Height and width are two useful properties and can be applied to most elements (remember we used them in the HTML Tutorial to control image size). For example in the style sheet:

.banner		{width: 250px;
		border: 1px solid #000000;
		background: #ff6600;}

In the previous example the width was set to 250 pixels but as the height property was omitted, the height of the box would be set by the contents. The height property can be specified too. For example:

.banner		{height: 500px;
		width: 150px;
		border: 1px solid #000000;
		background: #ff6600;}

Incidentally, for which the html would be:

<div class="banner">
<p>Content, content, content...</p>
</div>

Instead of the old method of using tables and transparent images to control layouts, CSS and the box model allow more elegant and precise layouts to be created in accordance with the recommendations of W3C (see section on web standards).