Exercise - Style sheets

In this exercise we change the formating of a web page by embedding a style sheet in the header. Then when we're satisfied with the way it looks, we'll copy and paste that information into a new file and save it with the .css extension and thereby create an external style sheet.

Next we'll open a second document, link it to that external style sheet and see how the formatting changes so that it matches the first. If time allows, we'll make an in-line modification to one tag in document #2 to learn how to make modifications for special circumstances.

Our pages are from The Origin of the Species and The Voyage of the Beagle, by Charles Darwin. Let's pretend Charles coded them in plain HTML, but has asked us to come up with an updated look that he can apply to all the online editions of his books. We'll open a sample page from Origins, experiment with some embedded styles, then apply to the Beagle material.


Step 1: Open Simple Text, then open origins.html, located with the "styles" folder of the HTML class folder on your desktop. Notice that he used header tags and made a link to the first chapter, which is part of a list.

Step 2: Make enough space somewhere in the header and type the following styles. This is an "embedded" style sheet - so you must enclose your definitions with the <STYLE>...</STYLE> tag.

<STYLE TYPE="text/css">

BODY {background-color:beige}
H1 {font-family: verdana; font-size: 36pt; color:maroon}
H2 {font-family: verdana; font-size: 20pt; color: sienna}
H3 {font-family: verdana; font-size: 18pt; color:midnightblue}
P {text-indent: 2em; font-family: arial; color: black}
LI {font-family: verdana; color:darkolivegreen}

A:link {color: green; font-weight: bolder; text-decoration: none}
A:visited color: red; text-decoration: none}
A:hover {color: orange; text-decoration: underline}
A:active {color: yellow; text-decoration: none}

</STYLE>

Step 3: View origins.html in Internet Explorer. You'll have to use IE or the latest version of Netscape in order to see the "hover' effect.

Step 4: Open a new document and copy and paste the above style definitions in. This is an "external style sheet", so this time DO NOT include the <STYLE>...</STYLE> tags. Save it as darwinstyle.css in the same folder as the Darwin pages.

Step 5: Now open beagle.html. Make a space in the header of this document type in:

<LINK REL=STYLESHEET TYPE="text/css" HREF="darwinstyle.css">

Step 6. View the origins.html in Internet Explorer. You'll have to use IE in order to see the "hover' effect. See how it now looks like origins.html? Neat, huh?