The Webpage example below uses a stylesheet that is referenced within the HEAD section of the html file.
<LINK REL="stylesheet" HREF= "sheets/page2.css" >
It is not the best color scheme for the subject matter but it is an improvement over the previous example Use care when selecting print and background colors to ensure that there is sufficient contrast to make you webpages easy to read.
<!DOCTYPE html >
<HTML LANG="en">
<HEAD>
<META CHARSET="UTF-8">
<TITLE>HTML5 Compliant Page - Simple Style</TITLE>
<LINK REL="stylesheet" HREF= "sheets/page2.css" >
</HEAD>
<BODY>
<H1>Atlantic Cod </H1>
<H2>Gadus morhua</H2>
<P>The Atlantic Cod is a coldwater fish that was once plentiful along the continental shelf of the Northern U.S. and Canada. </P>
<P>
A bottom dweller, cod are opportunistic feeders which will eat a variety of fish, crabs and other invertebrates.
While cod can grow to be more that 6 feet long and weigh more than 200 pounds, most adults will average around ten pounds. </P>
<P>
They are generally found in depths of 60 to 1500 feet but will go shallower during the breeding season where each
breeding female will release her free floating eggs which may number in the millions.
Assuming that the eggs are successfully fertilized, only a small number of the resulting fry will survive to become adults. </P>
<IMG SRC = "images/atlantic_cod.jpg" WIDTH= "300" HEIGHT="125">
<P>
The cod's delicate white meat is high in protein and low in oils, which makes it possible to preserve the fish for long periods time without becoming rancid by drying and curing it with salt.
</P> <P>
In the days before canning and refrigeration, salt cod was traded through out the World where it became a major food staple in North America, Europe, and the West Indies.
It was the increasing demand for salt cod that was an early driver in the colonization of New England and the Canadian Maritime. </P>
<P>
New and aggressive fishing technologies in the 20th century caused this seemly inexhaustible natural resource to collapse by over harvesting not only cod but its food sources as well. </P>
<HR>
<H3>Works Consulted </H3>
<P CLASS="footnote" >
Canadian Museum of Nature "Atlantic Cod" Natural History Notebooks. Canadian Museum of Nature 12 Feb 2013 <http://nature.ca/notebooks/english/atlanticcod.htm> from archive.org <BR>
<BR>
Wisner,Bill "McClane's New Standard Fishing Encyclopedia" McClane, A.J. Ed. Gramercy Books NY,NY 1998 p. 58-60 <BR>
<BR>
Watkins, Thayer "The Collapse of the Code Fishery of the Grand Banks" San Jose State University Department of Economics 12 Feb 2013 <http://www.sjsu.edu/faculty/watkins/grandbanks.htm> <BR>
<BR>
Woodard, Colin "Ocean's End : Travels Through Endangered Seas" Basic Books 2000 p. 72-79
</P>
<P> <A HREF="http://html5.awardspace.info/index.html">Home Page</A>
<A HREF="htmlref.htm">HTML Tag Reference </A> </P>
<P> <A HREF="http://html5.awardspace.info/index.html"Home Page</A>
<A HREF="htmlref.htm"HTML Tag Reference </A>
</P>
</BODY>
</HTML>
Note that the works consulted list is in a smaller font and a different color than the rest of the text. This is done by creating a special class of the paragraph tag, footnote. By adding the following line to the CSS file we can call the class with this tag <P CLASS="footnote">.
P.footnote {color:black;font:normal 10pt "Arial"}
The class name used doesn't have to be footnote, it could be any class name that makes sense.
BODY {background:yellow;}
H1 {color:red; font:bold 16pt "Arial"}
H2 {color:purple; font:bold 14pt "Arial"}
H3 {color:navy; font:bold 12pt "Arial"}
P {color:red;font:normal 12pt "Arial"}
P.footnote {color:black;font:normal 10pt "Arial"}
HR{background-color:blue;height:5px}
A:link{font:normal;color:orange}
A:visited{font:normal;color:cyan}