Cascading Style Sheet Notes I

By now your web page code should look something like the following.  Your web page will have a different JPEG image name (.jpg file), height, width, and alternate tag.   Your hyperlink will also probably look different.  There is one modified line in the code below: after the title and before the close head tag </head> there is a link tag with a hyperlink reference to a CSS file called teal.css.  Add this line to your web page if it is not already there.  You will be replacing the dana.css with your own CSS file using your own name.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="AUTHOR" content="Dana Lee Ling">
<title>Dana's Page</title>
<link href="dana.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Marlin&#39;s Manse</h1>
<p>I am an active, outgoing, single teensomething monther with interests in trucks and boats.</p>
<p><img src="marlin.jpg" alt="Marlin!" width="194" height="200"></p>
<p><a href="http://www.pbs.org/kids">Visit my favorite web site!</a></p>
</body>
</html>

The result of the above HTML file can be seen at: http://www.comfsm.fm/~dleeling/cis/dana.html
Markup codes: http://www.w3.org/MarkUp/html3/latin1.html

Cascading Style Sheet (CSS) files are also made with notepad. The extension for a CSS file is .css. The following is a simple CSS file.

body {background: black; color: gray; font-family: Verdana, sans-serif}
a {background: black; color: red; font-family: Verdana, sans-serif}
h1 {background: black; color: blue; font-family: Nadianne, sans-serif}
p {background: black; color: lime; font-family: "Book antiqua", Palatino, serif}

The above CSS file can be viewed at: http://www.comfsm.fm/~dleeling/cis/dana.css

A CSS file consists of tag names followed by property lists.  A full listing of properties is at: http://www.htmlhelp.com/reference/css/properties.html Each property is followed by a full colon and the property value.  If there are multiple possible values, then the values are separated by commas. Properties are separated by semi-colons. Note that the list is enclosed in brackets, not parentheses.

Fonts: You can use any font, but each list of possible font values must be terminated by one of the five generic fonts.

Colors you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

CSS Help:
http://www.htmlhelp.com/reference/css/