Box and Border Properties of Cascading Style Sheets (CSS)

With the box properties, you can position styled objects anywhere in a browser window, position objects relative to the other objects on the page, and apply the padding and margin box style rules selectively to any of or all the four sides of the styled object, such as left and bottom or top, left, and right.

When styling less than all four sides, be sure to add 0 values to the sides that should not contain values, rather than leaving them blank.

width/height: Use the width and height attributes to set the dimensions of an object or container such as a table, table cell, or layer. Set the attributes to auto to force the size of the object to match the contents of the object, or enter any value, positive or negative, in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage).

#rings { height: auto; width: 475px; }

float: Use this style to control the side (left, right, or none) on which other objects will float around the styled object.

.saleitems { float: right; }

clear: Often used in conjunction with the float property, this style attribute controls whether other objects can appear next to the styled object. Variables for this attribute include left, right, both, and none. For example, when a layer appears on the side of an object with the clear side specified, that object is bumped to the area below the layer.

.news { clear: both; }

padding: This property is like the margin, only with padding you apply extra space between the styled object and any border surrounding it, as with a sentence or a word inside a table cell. Set the padding size on the left, right, top, and/or bottom sides using any value, positive or negative, in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage).

When uniform sizes are applied to all four sides of the styled object, only one value, as in padding:10px;, needs to be listed in the declaration. Otherwise, specify values for all four sides:

.sidebarimage { padding: 10px 0px 10px 0px; }

margin: Use the margin property to add or subtract additional space between the page edge (or parent container) and the object being styled, such as the area surrounding a word or layer. Set the margin size on the left, right, top, and/or bottom sides using any value, positive or negative, in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage).

You may also use the auto value on both sides of a styled object to center the object within its parent container. When uniform values are applied to all four sides, only one value needs to be listed in the declaration. Otherwise, specify values for all four sides:

#contact { margin: 0px auto 0px auto; }

Border properties define the color, style, and width of borders around any styled object. Because borders can go on all four sides of an object, each side can have totally different border attributes! For best results, as with margins and padding, be sure to add a 0 or none to any side property not being styled:

.tablecell {
 border-top: 0px none;
 border-right: 2px dotted #069;
 border-bottom: 1px solid #09C;
 border-left: 2px dotted #069;
}

style: You can specify borders in any of the following styles: solid, dotted, dashed, double, groove, ridge, inset, outset, or none. Style must be specified in conjunction with the color and width.

.tablecell { border: 2px dashed #330066; }

width: You can set options for the thickness of the border to thin, medium, or thick. Or, for more precise measurements, use as any value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage. Specify the width along with the color and border style.

.tablecell { border: 1px dotted #660033; }

color: To colorize the border attribute, specify the hexadecimal value of the desired color and be sure to include the number symbol (#) before the hex value. Also include a style type and width for the border.

image0.jpg
.tablecell { border: 5px solid #003366; }
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.