CSS Box Properties
These 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;
}
When you use the border property by itself, there are three values associated with it (any of which can be eliminated). The first is the width of the border. You can also use any unit of measurement you like to specify the border width, or if you prefer, you can use thin, medium, or thick. The actual width of borders specified using the keywords is entirely dependent upon the user’s browser.
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:
<html>
<head>
<title>Your title</title>
<style type="text/css">
.one { border: thin dotted black; }
.two { border: 2px solid blue; }
.three { border: 3px groove red; }
.four { border: thick double #000; }
</style>
</head>
<body>
<div class="one">My 1st border class</div>
<div class="two">My 2nd border class</div>
<div class="three">My 3rd border class</div>
<div class="four">My 4th border class</div>
</body>
</html>
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; }
<html>
<head>
<title>Your title</title>
<style type="text/css">
.one { border-top: thick dotted black;
border-right: thick solid blue;
border-bottom: thick groove red;
border-left: thick double #000; }
blockquote { border-left: 3px solid red; }
</style>
</head>
<body>
<div class="one">deferent border style</div>
<blockquote>This is a blockquote.</blockquote>
</body>
</html>
Layouts With CSS' CATEGORY »
Adding CSS to HTML pagesCSS Selectors
CSS Units Of Measure
CSS Box Properties