Once upon a time, people who wanted a box on a web page had to resort to some trickery. You'd make a table with a single cell, then nest another table inside it. You would set the outer table to the color you wanted for the box border, and the inner table to the box color. You would use the cellpadding attribute for the table to control the width of the line.
By adjusting the cell padding, you could make the line thicker.
You could also get this effect by setting the cell spacing of the outer table..
While this is conceptually fairly easy to remember, it can be very difficult to add a box around a table of existing code, especially a nested table, and if you decide you want to change this look, you would then have to edit it everywhere in your site where you've used it.
Using a CSS style called "bluebox", we can avoid all this fancy coding and concentrate on the table contents instead. Also, if we put more than one table on the page or on the site and decide to change the look, all we have to do is change the style description in one place.
A style like bluebox can also be applied to a single table cell.
Using CSS, a box style can also enable much more interesting effects that are impossible to do by nesting tables:
| Row1 |
| Row2 |
| Row3 |
The styles bluebox and bluebox2, which use background and border attributes, aren't limited to tables or table cells, either.
You can apply a style to a single paragraph, for instance.
Or, you can apply a style to a few words. Applying some styles to different parts of your document will not necessarily change all of the attributes in the style. We'll explore in more detail which types of CSS attributes work for which tags. You can explicitly call out a style like this, or you can simply set up your CSS style so that it redefines the default browser look and feel for a standard tag like <H1>. This article uses a redefinition of the H1 tag for the title.