INFORMATION
THE ASSIGNMENT IS DUE ON MONDAY OCTOBER 1, 2007.
NOTE: be sure to finish Part I before you begin Part II.
PART II. MAKE YOUR HTML FILE LOOK PRETTY.
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:
http://www.w3.org/MarkUp/Guide/Style.html
OR
http://www.w3.org/Style/Examples/011/firstcss
OR
more than you ever wanted to know here:
http://www.w3.org/Style/Examples/011/firstcss
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:
<ul>
<li> chocolate
<li> chocolate
<li> chocolate
</ul>
</div>
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.