Chapter 24. Coloring and Formatting CSS Divs

Topic 23 showed you how to color the cells of a table. You can specify background colors for divs, too, along with a couple of other appearance attributes that HTML tables just don't support. Once again, as with all things CSS, make sure you test your design in a number of browsers before you upload to the Web. Who knows how your target browsers will garble your perfectly legitimate CSS markup this time.

If the layout in Figure 24.1 looks familiar, that's because you've seen something like it before, in Topic 18, to be exact. No background colors appear in the code, as the View Source bears out. As you can see in Figure 24.2, adding the background-color attribute to the style definition creates a more graphical effect.

Listing 24.1. View Source for Figure 24.1.

 <div  style="position: absolute; width: 100%; height: 100px; top: 0px; left: 0px;">   Logo </div> <div  style="position: absolute; width: 200px; top: 100px; left: 0px;">   Nav </div> <div  style="position: absolute; width: 175px; top: 100px; right: 0px;">   Links </div> <div  style="position: absolute; top: 100px; left: 200px; right: 175px;">   Content </div> 

Figure 24.1. This CSS layout doesn't specify background colors for any of the divs.

Figure 24.2. This CSS layout creates a more graphical effect by specifying background colors in the Logo, Nav, and Links divs.

Listing 24.2. View Source for Figure 24.2.

[View full width]

 <div  style="position: absolute; width: 100%; height: 100px; top: 0px; left: 0px;  background-color: #99CCFF;">   Logo </div> <div  style="position: absolute; width: 200px; top: 100px; left: 0px;  background-color: #99CCFF;">   Nav </div> <div  style="position: absolute; width: 175px; top: 100px; right: 0px;  background-color: #99FF99;">   Links </div> <div  style="position: absolute; top: 100px; left: 200px; right: 175px;">   Content </div> 

As with table cells, the background color is a hexadecimal color code. See Topic 23 for a list of common colors and their hexadecimal values.

Since you're working with CSS, you don't have to stop at coloring the background. For instance, you could add a solid black border around the Links div, as in Figure 24.3.

Figure 24.3. Nothing but your own design sensibilities and the CSS capabilities of your target browser prevent you from adding a border around the Links div.

To create the border, you add three new attributes to the div's style definition:

[View full width]
 <div  style="position: absolute; width: 175px; top: 100px; right: 0px;  background-color: #99FF99; border-width: 4px; border-style: solid; border-color: #000000;">   Links </div> 

Maybe you want a coupon-style dashed line instead of a solid line, and maybe you want a blue border instead of a black one, and maybe you want a lighter border weight, as in Figure 24.4.

Figure 24.4. Choose a different border style, and the border changes.

TIP

You can define different appearances for the top, left, right, and bottom segments of the border. See Table 24.1 at the end of this topic for details.

Table 24.1. Common CSS Attributes for Formatting Layout Divs

ATTRIBUTE	CONTROLS	POSSIBLE VALUES[*]	EXAMPLE
background-color	The background color of the div	Hexadecimal color code	background-color: #FFCC00;
border-color	The color of all four sides of the border	Hexadecimal color code	border-color: #000000;
border-color-bottom	The color of the bottom side of the border	Hexadecimal color code	border-color-bottom: #000000;
border-color-left	The color of the left side of the border	Hexadecimal color code	border-color-left: #000000;
border-color-right	The color of the right side of the border	Hexadecimal color code	border-color-right: #000000;
border-color-top	The color of the top side of the border	Hexadecimal color code	border-color-top: #000000;
border-style	The type of border on all four sides	dashed, dotted, groove, inset,outset, ridge, solid	border-style: dashed; double,
border-style-bottom	The type of border along the bottom	dashed, dotted, double, groove, inset, outset, ridge, solid	border-style-bottom: dotted;
border-style-left	The type of border on the left side	dashed, dotted, double, groove, inset, outset, ridge, solid	border-style-left: double;
border-style-right	The type of border on the right side	dashed, dotted, double, groove, inset, outset, ridge, solid	border-style-right: groove;
border-style-top	The type of border along the top	dashed, dotted, double, groove, inset, outset, ridge, solid	border-style-top: inset;
border-width	The weight (thickness) of all four sides of the border	Any CSS-supported measurement, such as px, cm, or in	border-width: 4px;
border-width-bottom	The weight of the bottom side of the border	Any CSS-supported measurement, such as px, cm, or in	border-width-bottom: 0.03cm;
border-width-left	The weight of the left side of the border	Any CSS-supported measurement, such as px, cm, or in	border-width-left: 0.03in;
border-width-right	The weight of the right side of the border	Any CSS-supported measurement, such as px, cm, or in	border-width-right: 4px;
border-width-top	The weight of the top side of the border	Any CSS-supported measurement, such as px, cm, or in	border-width-top: 0.03in;
padding	The amount of white space around all four sides of the div's	Any CSS-supported measurement, such as px, cm, or in interior	padding: 12px;
padding-bottom	The amount of white space at the bottom of the div	Any CSS-supported measurement, such as px, cm, or in	padding-bottom: 0.33cm;
padding-left	The amount of white space on the left side of the div	Any CSS-supported measurement, such as px, cm, or in	padding-left: 0.33in;
padding-right	The amount of whitespace on the right side of the div	Any CSS-supported measurement, such as px, cm, or in	padding-right: 12px;
padding-top	The amount of whitespace at the top of the div	Any CSS-supported measurement, such as px, cm, or in	padding-top: 0.33cm;
visibility	The appearance or disappearance of the div	hidden, visible	visibility: hidden;

^[*] Some browsers may support other values besides those listed, and some browsers may not support the given values.

Maybe you don't like the way the text fits snugly against the corner of the div. Just give the div some interior whitespace with the padding attribute, as in Figure 24.5.

Listing 24.3. View Source for Figure 24.4.

[View full width]

 <div  style="position: absolute; width: 175px; top: 100px; right: 0px;  background-color: #99FF99; border-width: 2px; border-style: dashed; border-color: #0000FF;">   Links </div> 

Figure 24.5. Introduce extra whitespace with the padding attribute.

TIP

As with border styles, you can go crazy with padding and define different amounts of it for the top, left, right, and bottom sides of the div. It's all in Table 24.1.

Listing 24.4. View Source for Figure 24.5.

[View full width]

 <div  style="position: absolute; width: 175px; top: 100px; right: 0px;  background-color: #99FF99; border-width: 2px; border-style: dashed; border-color: #0000FF;  padding: 12px;">   Links </div> 

And, as you saw (or didn't see) in Topic 10, you can actually make div elements disappear without deleting their code, as in Figure 24.6.

Listing 24.5. View Source for Figure 24.6.

[View full width]

 <div  style="position: absolute; width: 175px; top: 100px; right: 0px;  background-color: #99FF99; border-width: 2px; border-style: dashed; border-color: #0000FF;  padding: 12px; visibility: hidden;">   Links </div> 

Figure 24.6. Where did the div go? It's still in the code, but its visibility attribute is set to hidden.

FAQ

I hate CSS. Can't I get extra whitespace with the cellpadding attribute?

Sort of. HTML tables have the cellpadding attribute, which works much like the padding attribute of CSS. However, in an HTML table, the same cellpadding value applies to all the cells in the table. If you want padding in one cell but not in another, you're out of luck. In CSS, each div can have its own padding value.

Table 24.1 lists common CSS attributes for formatting the divs of your layout. Remember, each div can have its own custom style, so CSS provides a much larger range of options than HTML tables ever could. Then again, HTML tables are more stable, so you sacrifice broad browser compatibility when you start tinkering with CSS.