Cascading style sheets aren't just useful for changing text styles - you can use them to create special pieces of 'page furniture' too, which you can then use as often as you want across your web page (or even across your entire web site if you <LINK.. your style sheet in from an external file).
Here's the Cascading Style Sheet from the <HEAD> section of this document:
<style>DIV.important {text-align:center; margin-left:10%;
margin-right:10%;background-color: cyan;
border:1px black solid; font-weight:bold;}
DIV.i2
{text-align:center; margin-left:10%;
margin-right:10%;background-color: cyan;
font-weight:bold;}
DIV.gradbox {background-image:
url(gradbox.gif);
width:400;height:260;color:yellow;
font-weight:bold; font-family:Arial;
padding:10; }
</style>
The 'boxout' above is just a <DIV> tag pair with a
'class="important"' keyword, like this:
<DIV
class="important">
<font size=+2>Heading Text</font>
Standard text....
<p>
And I can create them whenever I like!
However as always, there are slight inconsistencies between Navigator and Internet Explorer browsers:
This box uses the DIV.i2 class, which has no border
Boxouts with graphical backgrounds
This is a DIV with a style class of 'gradbox'. That class specifies a background image ('gradbox.gif') plus the text properties (yellow, bold, Arial font etc).
It also specifies the height and width of the container. This works fine under IE4, but Navigator doesn't support the height property, so half-empty boxouts are half-height too!
HTML code for this boxout:
<DIV class="gradbox">
<u>Heading Text...</u><br>
Ordinary Text.....
</DIV>