Every element you create in your markup produces a box on the page, so an XHTML page is actually an arrangement of boxes. By default, the border of each element box isn't visible and the background of the box is transparent, so I understand if you're wondering where all the boxes are. With CSS, it's easy to turn on the borders and color the backgrounds of the boxes. You can then start to see your page structure in a whole new light.

You can adjust three aspects of the box with CSS: Border, Margin and Padding.

Border - You can adjust the thickness, style, and color of the border.

Margin - You can set the distance between this box and adjacent elements.

Padding - you can set the distance of a box's content from its border.

A simple way to think about these properties is that margins push outward from the border and padding pushes inward from the border. Because the box has four sides, properties associated with margin, border, and padding each have four settings: top, righ, bottom, and left.

The Box Border has three associated properties: Width, Style and Color.

Width - includes thin, medium, thick or any unit (ems, px, % and so on).

Style - This includes none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.

Color - includes any color value (for example: RGB, hex or keyword).

A common way to style a box is to make all four sides the same color, style and thickness. You might write something like this, specifying each of these three properties individually:

p.warning {border-width:4px}

p.warning {border-style:solid}

p.warning {border-color:#F33;}

The shorthand version:

p.warning {border:4px solid #F33; padding:2px}

This is the sample of the border.