<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>