This week's assignment will provide an opportunity to create a style sheet and apply it to a revised version of the camping.htm file you created last week.
Cascading style sheets allow you to define the text color, font face, font size, and style for every page on your web site without having to code this information on each and every page. Instead, you create one text file and name it styles.css. This text file is not a web page, just a text file with instructions. You can link this file to every web page file by inserting the line of code: <link rel="stylesheet" type="text/css" href="styles.css"> into the html coding for each web page you want to format based on the instructions found in the styles.css file.
The way this works is that when you open your web page, the browser software sees the code telling it to find styles.css, then uses the formatting definitions in the styles.css file to correct display the font on your web page. This makes it possible to change the look of every single page in your site by editing the styles.css file, not all your html files. You can see where this could be very useful.
Open Word Pad and enter the following. The spacing is a convenience for you as a designer so the code is easier to read and you can easily check to make sure the brace brackets match. You will need a colon (:) separating the style property name from the value, and you will also need a semicolon (;) at the end of each rule. Also, the CSS (Cascading Style Sheet) file does not contain any HTML tags.
Here is what you will type:
/*Chapter 7 Exercise styles.css */
/*Created by: your name goes here */
body { background-color: #ffffcc;
color: #663300;
}
a { text-decoration: none; }
a:hover {text-decoration: none; }
color: green;
background-color: #ffffff;
}
Save this as a text file in your website folder, naming it styles.css.
Open the camping.htm file you created last week and edit the file to remove all formatting tags including <b>, <u>, <i>, <font>, as well as any tags for alignment.
Add the following html code between the </p> and </body> code:
<p>
<a href="camping.htm">Return to Wilderness Camping web page</a>
</p>
Edit the head tags in your document to insert the following code between the title and closing </head> tag:
<link rel="stylesheet" type="text/css" href="styles.css">
Your edited camping.htm code should look like this. When you have finished, name this version of your file campingplain.htm. Publish styles.css and campingplain.htm to your folder up on the Yahoo/Geocities web server. Post the address of your new web page in this week's online discussion forum.
Grading Rubric