Newlogo.gif (8646 bytes)Cascading Style Sheets - More Than Just FancyText.


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>


Eye-catching boxouts are easy!
In this page's CSS I've defined a style class called "DIV.important". This class specifies a cyan background, 10% left and right margins, a 1-pixel border and bold, centered text.  

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!
Dropping these boxouts in is just a matter of enclosing my text in <DIV class="important">......</div> tags.

However as always, there are slight inconsistencies between Navigator and Internet Explorer browsers:

This box uses the DIV.i2 class, which has no border
If you're viewing this page in IE4, then this borderless box will look fine, with a nice rectangular background area in cyan. However in Navigator 4.0, the browser will crop the cyan background colour to just the area covered by text. That's why I put borders round the other boxes - it forced Navigator to fill the entire area with background colour.


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>


Back to Menu