fall 2007
assignment II part 2



NOTE: be sure to finish Part I before you begin Part II.


Cascading Style Sheets or CSS files provide a way to control the look-and-feel of your web page that is more convenient, more flexible and more comprehensive than adding parameters to HTML tags (like <td bgcolor="blue">). Style sheets let you define a wide range of settings such as colors, font types, font sizes, boxes around regions on your web page and spacing between various types of elements on the page.

First, you need to add a tag inside the <head> section of your HTML file that tells the browser where it can find the style file:

<link type="text/css" rel="stylesheet" href="style.css">

Second, create a separate "style file" (also called "CSS file") that contains the style sheet commands. An example of a style sheet command is:

body { color: black; background: white; }

where body is the element on the web page to which the parameter settings apply (text and background colors, in this case).

You can get a lot more information on style sheets from this on-line tutorial guide:
more than you ever wanted to know here:


Step 1. Use style sheets to set body properties in BOTH your HTML files.
(1 point)
Use a style sheet to set at least three properties in the body of BOTH the HTML files you created in part I of the assignment. These could be the background color, text color, font, etc.


Step 2. Use style sheets to set table properties.
(1 point)
Use a style sheet to set at least three properties of the table you created in the second HTML file (recipe) from Part I of the assignment. The syntax for changing the colors of all the table cells and text is:

table { color: black; background: white; }

Note the use of punctuation: the open-curly-bracket { at the beginning of the list of properties being set, the close-curly-bracket } at the end of the list of properties being set, the colon : after the name of each property being set, and the semi-colon ; after the name of each property value.

Table properties that can be set include:

name description possible values
color color of text in table cells any valid color name or hex value
background background color for table cells any valid color name or hex value
font-family font specification for text in table cells examples: serif, sans-serif, monospace, courier, verdana
font-size size of font in table cells relative (e.g., 200%) or absolute (e.g., 8pt) values

You can choose whether you want to include the CSS commands in your HTML file or create an external style.css file. If you do create an external file, don't forget to submit it along with the HTML files!


Step 2. Use style sheets to set DIV properties.
(1 point)
A web page can be divided up into sections, where each section is called a DIV. Then you can set parameter values for the DIV.

First, create a file named style.css. Put in some tags to change the color of the text and background in your document.

Then, in your first HTML file (the one with the list, from part I), create a DIV like this:

<div class="list">
my favorite things to eat:
<li> chocolate
<li> chocolate
<li> chocolate

and in your style file, create an entry like this:

div.list { color: purple; background: yellow; border: solid; border-width: 5pt }

and play with the property settings of div.list in your style file to make it look nifty.


Remember, the whole assignment---everything here in addition to your answers to Part I---is due on Monday October 1.