Box Properties
Last update on: 06-25-2008These properties are used to position elements, control the white space around them, and to apply effects such as borders to them. They're referred to as box properties, because they work on box-shaped regions of the page.
Once you've mastered these properties, you can forget about using tables to lay out a page. CSS offers all the capabilities that tables do, with less markup and the capability to maintain the layout in one CSS file rather than on each page of your site.
When discussing box properties, I'm going to start off with a humble <div>. People who lay out pages using CSS love the <div> tag because it brings absolutely nothing to the table in terms of modifying the appearance of a page. It's just a container that you can apply styles to.
Controlling Size:
There are two properties for controlling the size of a box element: width and height. They enable you to set the size of the box to an absolute size, or if you prefer, to a size relative to the browser window. For example, to make the header of your page 100 pixels high and half the width of the browser, you could use the following rule:
#header { width: 50%; height: 100px; }
Borders:
CSS provides several properties for controlling borders around elements. When you worked with tables, you got a taste of borders. In the CSS world, you can apply them to any box. First, let's look at the border property by itself:
#header {
border: width style color;
}
The next option is style. The default here is none for most elements; the other options are dotted, dashed, solid, double, groove, ridge, inset, and outset. Not all browsers support all the border styles.
The last option is color. As is the case with all properties that accept multiple values, you aren't required to specify any of them. You need specify only the values that you want to change. Here are some examples that use the border property:
There are a number of additional properties that can be used to modify the border of the page. You can set the styles for each side's border individually using border-top, border-right, border-bottom, and border-left. That enables you to create styles like this:
.one { border-top: thick dotted black;
border-right: thick solid blue;
border-bottom: thick groove red;
border-left: thick double #000; }
Layouts with CSS's lessons:
Adding CSS To PagesCSS Selectors
Units Of Measure
Box Properties