Chris Rathman / Chris.Rathman@tx.rr.com 
<HTML>
<HEAD>
<TITLE>Sample HTML with Styles</TITLE>

<STYLE TYPE="text/css">
   @import url(include.css);
</STYLE>

<STYLE TYPE="text/css">
<!--
   /* Style Comment */
   P {
      /* Font Attributes */
      FONT-SIZE: MEDIUM;                        /* 12pt; */
      FONT-WEIGHT: NORMAL;
      FONT-VARIANT: NORMAL;
      FONT-STYLE: NORMAL;
      FONT-FAMILY: HELVETICA, SANS-SERIF;

      /* Color and Background Attributes */
      COLOR: GREEN;                             /* #ff0000; */
      BACKGROUND-COLOR: TRANSPARENT;
      BACKGROUND-IMAGE: NONE;

      /* Text Attributes */
      WORD-SPACING: NORMAL;
      LETTER-SPACING: NORMAL;
      TEXT-TRANSFORM: NONE;                     /* capitalize; */
      TEXT-ALIGN: LEFT;
      TEXT-INDENT: 30;

      /* Box Attributes */
      MARGIN-TOP: 10;
      MARGIN-BOTTOM: 10;
      MARGIN-LEFT: 0;
      MARGIN-RIGHT: 0;
      PADDING-TOP: 10;
      PADDING-BOTTOM: 10;
      PADDING-LEFT: 0;
      PADDING-RIGHT: 0;
      BORDER-TOP-WIDTH: 0;
      BORDER-BOTTOM-WIDTH: 0;
      BORDER-LEFT-WIDTH: 0;
      BORDER-RIGHT-WIDTH: 0;
      BORDER-COLOR: YELLOW;
      WIDTH: AUTO;
      HEIGHT: AUTO;
      /*FLOAT: NONE;*/
      /*CLEAR: NONE;*/

      /* Classification Attributes */
      DISPLAY: BLOCK;
      WHITE-SPACE: NORMAL;
      LIST-STYLE-TYPE: SQUARE;
      LIST-STYLE-IMAGE: NONE;
      LIST-STYLE-POSITION: OUTSIDE;
   }

   /* class for use with a specific tag */
   P.myParagraph {
      COLOR: PURPLE;
   }

   /* class for use with any tag */
   .myClass {
      COLOR: INDIGO;
   }

   /* element id - valid for only one element */
   #myElementID {
      COLOR: ORANGE;
   }

   UL LI {
      LIST-STYLE-TYPE: SQUARE;
      LIST-STYLE-IMAGE: NONE;
      LIST-STYLE-POSITION: OUTSIDE;
   }

   /* nested elements */
   UL UL LI {
      LIST-STYLE-TYPE: CIRCLE;
      LIST-STYLE-IMAGE: NONE;
      LIST-STYLE-POSITION: OUTSIDE;
   }

   /* multiple tags may be grouped together */
   H1,H2,H3,H4,H5,H6 {
      COLOR: GREEN;
   }

   /* body tag applies to entire document */
   BODY {
      COLOR: RED;
      TEXT-ALIGN: JUSTIFY;
      FONT-FAMILY: HELVETICA;
   }

   /* CSS2: pseudo elements */
   P:first-letter { FONT-FACE:Gothic, serif; }
   P:first-line { COLOR: BLUE; }

   /* CSS2: pseudo classes */
   A:link { COLOR: DARKRED; }
   A:active { COLOR: CORAL; }
   A:visited { COLOR: LIGHTBLUE; }

   /* CSS2: attribute selects */
   P[ALIGN] { COLOR: BLUE; }
   HR[ALIGN="left"] { COLOR: BLUE; }
   *[ALIGN="*middle"]  { COLOR: BLUE; }

   /* CSS2: parent-child selectors */
   BODY > P { FONT-SIZE:12pt; }

   /* CSS2: adjacent selectors */
   H1 + H2 { COLOR: BLUE; }

   /* CSS-P positioning */
   #someSpan { POSITION:ABSOLUTE; LEFT:30; TOP:30; }

//-->
</STYLE>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
   // write some script to dynamically change the HTML
   var i = 0
   function changeText() {
      document.all.myElementID.innerHTML = "Dynamic HTML (" + i++ + ")";
      document.all.someDiv.top = document.all.someDiv.top + i*10;
   }
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
Hello<br><br><br><br>
<input type="button" name="MyButton" value="Change Document" onClick="changeText()"><br>
<P>This is a normal paragraph</P>
<P STYLE="COLOR:BLUE; TEXT-INDENT:60; FONT-FAMILY:COURIER">This is an indented paragraph</P>
<P CLASS="myParagraph">This is paragraph that uses a style class</P>
<P CLASS="myClass">This is paragraph that uses a generic class</P>
<P ID="myElementID">This is paragraph that uses a named element id</P>

<UL>
<LI>Dallas Area
   <UL>
   <LI>Dallas
   <LI>Richardson
   </UL>
<LI>Fort Worth Area
   <UL>
   <LI>Fort Worth
   <LI>Benbrook
   </UL>
</UL>
<H1>Hello</H1>
<H2>Goodbye</H2>

<SPAN ID="someSpan">Hello Again</SPAN>
<DIV ID="someDiv" STYLE="COLOR: RED; POSITION:ABSOLUTE; LEFT:150; TOP:90">And Another</DIV>
</FORM>
</BODY>
</HTML>
Chris Rathman / Chris.Rathman@tx.rr.com