[Cascading Style Sheets]
[Previous page] [Next page] [Section contents page]

Sample Style Sheet

Below are the complete contents of the stylesheets.css (for IE 4.0x), stylesheets3.css (for IE 3.0x), and stylesheets_n.css (for Netscape) files used as the alternative style sheets for this section. I include them here samples you can study and experiment with in your own style sheet development.

Internet Explorer 4.0 Version 
	.StyleSheetHiddenPlaceHolder { display: none; }

	H1
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: xx-large;
		color: #660066;
		text-align: Left;
		position: relative;
		}

	H2
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 18pt;
		color: #660066;
		text-align: Center;
		position: relative;
		}

	H3
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 16pt;
		color: #660066;
		position: relative;
		}

	H4
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #660066;
		background: transparent;
		width: auto;
		height: auto;
		position: relative;
		left: auto;
		top: auto;
		}

	H5
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 10pt;
		color: #660066;
		background: #FFFFCC;
		position: relative;
		}

	P
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		margin-left: 1cm;
		}

	BLOCKQUOTE
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		margin-left: 2cm;
		}

	PRE
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		margin-left: 1cm;
		position: relative;
		}

	I
	{		
		color: #000099;
		position: relative;
		}

	B
	{		
		color: #990000;
		position: relative;
		}

	UL
	{		
		position: relative;
		margin-left: 1.5cm;
		}

	OL
	{		
		position: relative;
		margin-left: 1.5cm;
		}

	LI
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin: .4cm;
		position: relative;
		}

	TABLE
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #006600;
		position: relative;
		}

	TR
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		}

	TD
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		position: relative;
		}

	TH
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCCC99;
		position: relative;
		}

	.blue
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCFFFF;
		position: relative;
		}

	CAPTION
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Helvitica';
		font-weight: bold;
		font-size: 10pt;
		color: #000066;
		margin: .1in;
		position: relative;
		}

	A:active
	{		
		color: #FF0000;
		}

	DIV
	{		
		position: relative;
		}

	.note
	{		
		font-size: 10pt;
		color: #006600;
		background: #FFFFFF;
		position: relative;
		padding: 2pt 2pt;
		border-width: thin;
		border-style: groove;
		}

	.float
	{		
		width: 40%;
		text-align: left;
		float: right;
		font-size: 10pt;
		color: #006600;
		background: #FFFFFF;
		position: relative;
		padding: 4pt 4pt;
		border-width: thin;
		border-style: groove;
		}

	.small
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: 8pt;
		text-align: center;
		}

	.red
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: 8pt;
		color: #FF0000;
		text-align: center;
		position: relative;
		}

	.redleft
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-size: 10pt;
		color: #990000;
		text-align: left;
		position: relative;
		}

	.indent
	{		
		margin-left: 1cm;
		position: relative;
		}

	.noindent
	{
		margin-left: 0;
		position: relative;
		}

	.large
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-style: italic;
		font-weight: bold;
		font-size: 16pt;
		color: #660066;
		text-align: left;
		position: relative;
		}

	.shadow
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: xx-large;
		color: #9966FF;
		text-align: left;
		height: 0;
		position: absolute;
		left: -1pt;
		top: -1pt;
		}

	.first
	{		
		border-top-width: thin;
		border-left-width: thin;
		border-left-color: #66CC99;
		border-top-color: #66CC99;
		border-top-style: outset;
		border-left-style: inset;
		padding-top: 2pt;
		padding-left: 2pt;
		}

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}

	.shadow3
	{		
		font: Bold x-large 'sans-serif';
		color: #339999;
		position: absolute;
		left: 50pt;
		top: 35pt;
		z-index: 3;
		}
Internet Explorer 3.0 Version 
	.StyleSheetHiddenPlaceHolder { display: none; }

	H1
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 30pt;
		color: #660066;
		}

	H2
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: x-large;
		color: #660066;
		}

	H3
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #660066;
		background: #FFFFCC;
		}

	H4
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #660066;
		background: #FFFFCC;
		}

	H5
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #660066;
		background: #FFFFCC;
		}

	P
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 1cm;
		}

	BLOCKQUOTE
	{		
		font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 2cm;
		}

	PRE
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		}

	XMP
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		}

	I
	{		
		color: #000099;
		}

	B
	{		
		color: #990000;
		}

	UL
	{		
		margin-left: 1.5cm;
		}

	OL
	{		
		margin-left: 1.5cm;
		}

	LI
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TD
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TH
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCCC99;
		}

	TH.blue
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 12pt;
		color: #990000;
		background: #CCFFFF;
		}

	CAPTION
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #000066;
		margin: .1in;
		}

	A:active
	{		
		color: #FF0000;
		}

	.note
	{		
		font-size: 10pt;
		color: #006600;
		background: #FFFFFF;
		}
	.small
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 8pt;
		text-align: center;
		}

	.red
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 8pt;
		color: #FF0000;
		text-align: center;
		}

	.redleft
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		}

	.indent
	{ margin-left: 1cm }

	.noindent
	{
		margin-left: 0;
		position: relative;
		}

	.large
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-style: italic;
		font-weight: bold;
		font-size: 16pt;
		color: #660066;
		text-align: left;
		margin-left: 1cm;
		}

	.shadow
	{		
		font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
		font-weight: bold;
		font-size: 30pt;
		color: #9999FF;
		text-align: left;
		margin-top: -48pt;
		margin-left: -1pt;
		}

	P.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		}

	.shadow3
	{		
		font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
		font-weight: bold;
		font-size: 30pt;
		color: #336666;
		text-align: left;
		margin-top: -70pt;
		margin-left: 38pt;
		}
Netscape Communicator 4.0 Version 


	.StyleSheetHiddenPlaceHolder { display: none; }

	H1
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-style: bold;
		font-weight: bold;
		font-size: xx-large;
		color: #666666;
		text-align: left;
		position: relative;
		}

	H2
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: x-large;
		color: #660066;
		}

	H3
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: large;
		color: #660066;
		}

	H4
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: medium;
		color: #660066;
		}

	H5
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: medium;
		color: #660066;
		}

	P
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 1cm;
		}

	BLOCKQUOTE
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 2cm;
		position: relative;
		}

	PRE
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		margin-left: 1cm;
		position: relative;
		}

	EM
	{		
		color: #000099;
		}

	STRONG
	{		
		color: #990000;
		}

	UL
	{		
		margin-left: 1.5cm;
		}

	OL
	{		
		margin-left: 1.5cm;
		}

	LI
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TABLE
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #006600;
		}

	TR
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TD
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TH
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: large;
		color: #990000;
		background: #CCCC99;
		}

	CAPTION
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: small;
		color: #000066;
		margin: .1in;
		}

	A:link
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #0000FF;
		}

	A:visited
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #990099;
		}

	A:active
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #FF0000;
		}
	.small
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: small;
		text-align: center;
		}

	.red
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: small;
		color: #FF0000;
		text-align: center;
		}

	.redleft
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #990000;
		text-align: left;
		}

	.indent
	{		
		margin-left: 1cm;
		}

	.noindent
	{		
		margin-left: 0;
		position: relative;
		}

	.large
	{		
		font-family: 'Trebuchet MS', 'Arial', 'sans serif';
		font-style: bold;
		font-weight: bold;
		font-size: 18pt;
		color: #999999;
		text-align: left;
		margin-top: .4cm;
		margin-left: .02cm;
		}

	.blue
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		color: #990000;
		background: #CCFFFF;
		}


	.note
	{		
		font-size: small;
		color: #006600;
		background: #FFFFFF;
		border: thin #006600 ridge;
		}

	.first
	{		
		padding-top: 2pt;
		padding-left: 2pt;
		border-top-width: thin;
		border-left-width: thin;
		border-left-color: #66CC99;
		border-top-color: #66CC99;
		border-top-style: outset;
		border-left-style: inset;
		}

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}

	.shadow
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: xx-large;
		color: #9966FF;
		text-align: left;
		}

	.shadow3
	{		
		font: Bold x-large 'Trebuchet MS', 'sans-serif';
		color: #339999;
		position: absolute;
		}
		
	#layer1
	{		
		position: relative;
		}

	#layer2
	{		
		position: absolute;
		left: -2pt;
		top: -2pt;
		}

	#layer3
	{		
		position: absolute;
		left: 40pt;
		top: 30pt;
		}
[Previous page] [Next page] [Section contents page]