Content Area

Content Area

The content area of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents as shown in Listing 5.12.

Listing 5.12. CSS Code Containing Various width and height Values

p { width: 100pt; }
p { height: 20pc; }
p { width: 300px; }
p { height: 40em; }
p { width: 50ex; }
p { height: 600mm; }
p { width: 70cm; }
p { height: 8in; }
p { width: 50%; }

The color property can be used to style the text color. Color can be specified in a number of ways, including keywords, hexadecimal RGB, and functional notation RGB.

Keywords for color include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Although other keywords might work in some browsers, they are not part of the specification and should not be used.

Hexadecimal colors can be specified using only three or six hexadecimal characters as shown in Listing 5.13. When a color has three pairs of hexadecimal digits (such as #ff0000), it can be shortened by removing one digit from each pair (#f00). RGB colors can be specified using three comma-separated integer or percentage values. For example, the color red can be specified using either rgb(255, 0, 0) or rgb(100%, 0%, 0%) as shown in Listing 5.13.

Listing 5.13. CSS Code Containing Various color Values

p { color: red }
p { color: #f00 }
p { color: #ff0000 }
p { color: rgb(255,0,0) }
p { color: rgb(100%, 0%, 0%) }