For this page I have included a 50 pixel left margin and a 25 pixel right margin. I made the font for the entire page Helvetica, put in a mild yellow background color, and changed the color of the font to dark blue. I changed the H1 font size to 72 points, and the h2 to 42 points and the h3 to 20 points. I added a 35 pixel indentation for the paragraphs as well. The font size for the body is 9 pixels. The quick brown fox jumped over the lazy brown dog. The quick brown fox jumped over the lazy brown dog. The quick brown fox jumped over the lazy brown dog. The quick brown fox jumped over the lazy brown dog. The quick brown fox jumped over the lazy brown dog. The quick brown fox jumped over the lazy brown dog. The quick brown fox jumped over the lazy brown dog. The quick brown fox jumped over the lazy brown dog. pt, Arial Italic

Style Sheet h2

Style Sheet h3

Style Sheet h4

Style Sheet h5

Style Sheet h6

Style Sheet paragraph

Notice the first seven are block level elements, they each appear on a different line. The next three are all on the same line. They are inline elements. This will be important later. Remember the difference.

Style Sheet bold Style Sheet italic Style Sheet big Style Sheet small

Notice the difference in the legibility of this text versus the text in the style sheet. This text is sans serif whilst the text in the style sheet section is serif font. The size is the same, but this is easier to read.

The style sheet looks like this...

body
	{
	background-color: #ffffef;
	margin-right: 25px;
	margin-left: 50px;
	font-family: Helvetica, Arial, sansserif;
	color: #000099;
	font-size: 10px;
	}
.balance
	{
	position: absolute;
	top: 400;
	}
		
h1.header1
	{
	position: absolute;
	left: 150;
	top: 100;
	color: #009900;
	}		 
h1.header2
	{
	position: absolute;
	left: 155;
	top: 95;
	color: #990000;
	}		 
h1.header3
	{
	position: absolute;
	left: 160;
	top: 100;
	color: #000099;
	}		 
h1.header4
	{
	position: absolute;
	left: 155;
	top: 110;
	color: #0000ff;
	}		 
h1	
	{
	font-size: 72pt;
	text-align: center;
	}		
h2	
	{
	font-size: 42pt;
	text-align: justified;
	}		
h3	
	{
	font-size: 20pt;
	}		
	
p.indent
	{
	text-indent: 35px;
	text-align: justify;
	background-color: #ff9;
	padding: 8px;
	}		
a:link
	{
	text-decoration: none;
	color: #800;
	}	
a:active
	{
	text-decoration: none;
	color: #0f0;
	}	
a:visited
	{
	text-decoration: none;
	color: #800;
	}	
a:hover
	{
	text-decoration: underline;
	color: #800;
	}
.image1
	{
	float: right;
	}
.image2
	{
	float: left;
	}
.image3
	{
	position: absolute;
	left: 50%;
	top: 50;
	}
	

CSS Page