CSS - Box Basics 101
 
Featuring: CSS-Cascading Style Sheets -Box Basics
Credit: Imagenation

The basics of boxes, pages, and borders are all summarized in the Figure below taken from the W3C basic documentation on the CSS1 recommendation:

Notice how HTML Core Content like a simple line or paragraph text is surrounded conceptually by a padding box which in turn has an border box surrounding it. The outer edge of the border box forms the border used in any CSS style. For example, this generic class .thick { border: 3px dashed black; } will create a thick, dashed outer border around any text. Then outside the border box is the margin box whose outer edge either forms the page boundary or the region boundary.

Each of the abbreviations in the figure corresponds to a CSS box attribute or styling property as follows:

TB - border-top: red solid 2px;
RB - border-right: blue solid 3px;
BB - border-bottom: solid black 4px;
LB - border-left: solid blue 3px;
TM - margin-top: 2px;
RM - margin-right: 3px;
BM - margin-bottom:4px;
LM - margin-left: 3px;
TP - padding-top: 2px;
RP - padding-right: 3px;
BP - padding-bottom:4px;
LP - padding-left: 3px;
Notice how we supplied the color, style and thickness/width values for each attribute of the border definition. They could have been spelled out in detail. So -
  border-top: red solid 2px fully specified would be:
  border-top-color: red; border-top-style: solid; border-top-width: 2px;
This will be the inspiration of a couple of generic styling classes which we will create to show off some box and border styling possibilities:

.doubleline {border-top-color: red; border-top-style: solid; border-top-width: 2px;
border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 2px;

The Box
Quote Style
Using the boxquote style as a generic class we can create a box with a quote from the text with the following CSS code:
.boxquote {float: left; text-align: center; border: solid black 1px;
font-family: Times, serif; font-size: 20pt; margin: 10px;}
This type of styling starts to suggest some of the features of more advanced word processing which up until know had to be achieved with elaborate <table> layouts.
"Small changes make for new possibilities"
However, small changes to the generic classes opens up some really attractive possibilities. In short, being aware of the box properties of CSS styles is essential for taking full advantage of CSS formatting capabilities. But as we shall learn in the future tutorials, box attributes are essential for setting up sophisticated tab and menuing systems enabled by CSS2. So learn CSS box attributes for the formatting anticipating some of the more advanced features to come.
 
Top of Page  Tutorials Home  CSS references