Figure 1 Using Cascading Style Sheets
<HTML>
<HEAD>
<TITLE>Style Demo 1</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: black;
color: lightgrey;
font-size: 20px;
font-family: Verdana }
.STYLE1 { color: red;
font-size: 50px;
font-family: Arial Black }
H1.STYLE2 {color : 052455;
font-size: 50pt;
font-family: Times New Roman;
font-style: italic }
.STYLE3 {background: green;
margin-right: 1in;
margin-left: 1in}
.STYLE4 {line-height: 15px;
color: blue}
-->
</STYLE>
</HEAD>
<BODY>
This text will show up using the BODY style. We'll have enough
<BR>
lines so that you can see what it looks like.
<P CLASS=STYLE1>
An example of body style 1
Pretty cool, huh?
</P>
<H1 CLASS=STYLE2>
My heading, in style H1.STYLE2.
</H1>
<P CLASS=STYLE3>
Some more text, this time in style 3. Note that it inherits various properties
from the BODY style, but then adds its own, such as a left and right margin.
</P>
<DIV CLASS=STYLE4>
And finally, we'll use style4 for a whole area.
<BR>
It changed the spacing and color.
<H1> That applies to headings too.
</DIV>
</BODY>
</HTML>
Figure 4 Creating Floating Text
<HTML>
<HEAD>
<TITLE>WWLive CSS demo 1</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: black;
color: lightgrey;
font-size: 10px;
font-family: Verdana }
.number { color: red;
margin-top: -50px;
font-size: 120px;
font-family: Arial Black }
.numberhl { color: darkred;
margin-top: -166px;
margin-left: -7px;
font-size: 120px;
font-family: Arial Black }
.demand { margin-top: -115px;
color: lightgray;
font-size: 18px;
// line-height: 26px;
weight: bold;
font-family: Arial }
-->
</STYLE>
</HEAD>
<BODY>
<DIV CLASS=number ALIGN=CENTER>~1~</DIV>
<DIV CLASS=numberhl ALIGN=CENTER>~1~</DIV>
<DIV CLASS=demand ALIGN=CENTER >
freedom to specify a font,<BR>in the knowledge that it is<BR>
freely available to any user<BR></DIV>
</BODY>
</HTML>
Figure 5 Creating Shadowed Text
<HTML>
<HEAD>
<TITLE>Style Demo 2</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: lightgray;
color: green;
font-size: 25px;
font-family: Verdana }
.BIGSHADOW { color: 004000;
font-size: 70px;
margin-left: 10px;
weight: bold;
font-family: Times New Roman }
.BIG {color: 008000;
margin-top: -85px;
font-size: 70px;
margin-left: 7px;
weight: bold;
font-family: Times New Roman}
-->
</STYLE>
</HEAD>
<BODY>
First some body text.
<DIV CLASS=BIGSHADOW>
A Shadow!
</DIV>
<DIV CLASS=BIG>
A Shadow!
</DIV>
</HTML>
Figure 7 Creating Different Type Effects
<HTML>
<HEAD>
<TITLE>Style Demo 3</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: 909090;
color: green;
font-size: 25px;
font-family: Verdana }
.BIGSHADOW { color: 004000;
font-size: 70px;
margin-left: 10px;
weight: bold;
font-family: Times New Roman }
.BIG {color: 008000;
margin-top: -85px;
font-size: 70px;
margin-left: 7px;
weight: bold;
font-family: Times New Roman}
.CHISELL {color :A0A0A0;
font-size: 100px;
margin-left: 10px;
font-weight: extra-bold;
font-family: Verdana}
.CHISELR {color: 707070;
font-size: 100px;
margin-left: 15px;
margin-top: -116px;
font-weight: extra-bold;
font-family: Verdana}
.CHISEL {color :949494;
font-size: 100px;
margin-left: 12px;
margin-top: -118px;
font-weight: extra-bold;
font-family: Verdana}
-->
</STYLE>
</HEAD>
<BODY>
First some plain old body text.
<DIV CLASS=BIGSHADOW>
A Shadow!
</DIV>
<DIV CLASS=BIG color=red>
A Shadow!
</DIV>
<DIV CLASS=BIGSHADOW STYLE="color=B0B000">
Extruded
</DIV>
<DIV CLASS=BIG STYLE="color=909000;margin-top=-83px">
Extruded
</DIV>
<DIV CLASS=CHISELL>
Chisel
</DIV>
<DIV CLASS=CHISELR>
Chisel
</DIV>
<DIV CLASS=CHISEL>
Chisel
</DIV>
<DIV CLASS=CHISELL>
Emboss
</DIV>
<DIV CLASS=CHISELR>
Emboss
</DIV>
<DIV CLASS=CHISEL STYLE="color=909090">
Emboss
</DIV>
<DIV CLASS=CHISELL>
Chisel
</DIV>
<DIV CLASS=CHISELR>
Chisel
</DIV>
<DIV CLASS=CHISEL STYLE="color=858585">
Chisel
</DIV>
</BODY>
</HTML>
Figure 9 Using CSS to Simplify HTML
<HTML>
<HEAD>
<TITLE>Style Demo 4</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {background: 909090}
P {color :A0A0A0;
font-size: 100px;
margin-left: 10px;
font-weight: extra-bold;
font-family: Verdana}
P.1 {color: 707070;
margin-left: 15px;
margin-top: -145px}
P.2 {color :949494;
margin-left: 12px;
margin-top: -147px}
-->
</STYLE>
</HEAD>
<BODY>
<P>
Chisel
<P CLASS=1>
Chisel
<P CLASS=2>
Chisel
</BODY>
</HTML>
Figure 10 Creating 3D Fonts
<HTML>
<TITLE>Chisel Checker</TITLE>
Enter values to try out different font effects.
<BODY>
<P>
<HR>
<TABLE >
<TR><TD BGCOLOR="#c0c0c0" WIDTH=231>Font: <INPUT NAME="Font" VALUE="Verdana" MAXLENGTH="25" SIZE=25>
</TD><TD BGCOLOR="#c0c0c0" WIDTH=230>Size:
<INPUT NAME="FontSize" VALUE="100" MAXLENGTH="3" SIZE=25>
</TD><TD BGCOLOR="#c0c0c0" WIDTH=230></TD></TR>
<TR><TD BGCOLOR="#FFFFFF" WIDTH=231>Highlight Text</TD><TD BGCOLOR="#808080" WIDTH=230>Shadow Text
</TD><TD WIDTH=230>Main Text </TD></TR>
<TR><TD BGCOLOR="#FFFFFF" WIDTH=231>Margin Left:
<INPUT NAME="HighML" VALUE="10" MAXLENGTH="5" SIZE=10>
</TD><TD BGCOLOR="#808080" WIDTH=230>Margin Left:
<INPUT NAME="ShadowML" VALUE="15" MAXLENGTH="5" SIZE=10>
</TD><TD WIDTH=230>Margin Left:
<INPUT NAME="MainML" VALUE="12" MAXLENGTH="5" SIZE=10>
</TD></TR>
<TR><TD BGCOLOR="#FFFFFF" WIDTH=231>Margin Top: <INPUT NAME="HighMT" VALUE="0" MAXLENGTH="5" SIZE=10>
</TD><TD BGCOLOR="#808080" WIDTH=230>Margin Top:
<INPUT NAME="ShadowMT" VALUE="-141" MAXLENGTH="5" SIZE=10>
</TD><TD WIDTH=230>Margin Top:
<INPUT NAME="MainMT" VALUE="-132" MAXLENGTH="5" SIZE=10>
</TD></TR>
<TR><TD BGCOLOR="#FFFFFF" WIDTH=231>Color:
<INPUT NAME="HighColor" VALUE="FFFFFF" MAXLENGTH="6" SIZE=10>
</TD><TD BGCOLOR="#808080" WIDTH=230>Color:
<INPUT NAME="ShadowColor" VALUE="606060" MAXLENGTH="6" SIZE=10>
</TD><TD WIDTH=230>Color:
<INPUT NAME="MainColor" VALUE="909090" MAXLENGTH="6" SIZE=10>
</TD></TR>
<TR><TD WIDTH=231>
<BR>Sample text: <INPUT NAME="SampleText" VALUE="Chisel" MAXLENGTH="50" SIZE=40>
</TD><TD WIDTH=230></TD><TD WIDTH=230>
<BR><INPUT TYPE=BUTTON VALUE="Try It Out" NAME="ShowMe">
</TD></TR>
</TABLE>
<HR>
<IFRAME WIDTH=500 HEIGHT=200 NAME="sample" SRC="blank.html">
</IFRAME>
<SCRIPT LANGUAGE="VBScript">
<!--
SUB ShowMe_OnClick()
'First write out the style information
parent.frames(0).document.write "<STYLE TYPE=""text/css""> <!-- BODY
{background: 909090}"
parent.frames(0).document.write "P {color :" + HighColor.Value
parent.frames(0).document.write "; font-size: " + FontSize.Value
parent.frames(0).document.write "px; margin-left: " + HighML.Value
parent.frames(0).document.write "px; margin-top: " + HighMT.Value
parent.frames(0).document.write "px; font-weight: bold; font-family: "
parent.frames(0).document.write Font.Value
parent.frames(0).document.write "} P.1 {color: " + ShadowColor.Value
parent.frames(0).document.write "; margin-left: " + ShadowML.Value
parent.frames(0).document.write "px; margin-top: " + ShadowMT.Value
parent.frames(0).document.write "px} P.2 {color :" + MainColor.Value
parent.frames(0).document.write "; margin-left: " + MainML.Value
parent.frames(0).document.write "px;margin-top: " + MainMT.Value
parent.frames(0).document.write "px} --> </STYLE>"
'Now fill in the sample text
parent.frames(0).document.write "<P>" + SampleText.Value
parent.frames(0).document.write "<P CLASS=1>" + SampleText.Value
parent.frames(0).document.write "<P CLASS=2>" + SampleText.Value
parent.frames(0).document.close
END SUB
-->
</SCRIPT>