2/9/06 Notes

To Notes

Summary for HCI 201 -- 2/9/06

Review Questions

How do you add “real” double quotes to a webpage?
Ans: Type  or  into the Code View.
How do you add an em dash (—)?
Ans: Type  into the Code View.

Introduction to CSS Styles

A document-level style is a style that applies to every HTML tag on a given page.
An external style is a separate file with extension .css that applies to every page to which it is attached.
Here is a sample style:
body { background-color: beige }
body is a selector or tag, background-color is a property, beige is a value.
Here is a sample style setting two properties:
body { background-color: beige; font-family: verdana }
The property is separated from its value with :
The property/value pairs are separated with ;
Repeat the exercise from the 2/2 Notes which sets fonts for the <p>, <h1> and <h2> elements, but using document-level and/or external styles instead:
1. Create a FrontPage website named test-styles that contains these two pages:
  page1.htm and page2.htm.
2. Follow the directions in the document Styles in FrontPage to add a document-level style to page1.htm.
  1. Set the fonts for the <h1>, <h2> and <p> tags.
  2. Also set the background color and text color for the <body> tag.
3. Remove the document-level style from page1.htm by deleting the lines
  <style>
  
  </style>
  and the styles between them.
4. Follow the directions in the document Styles in FrontPage to create an external style sheet:
  1. Set the fonts for the <h1>, <h2> and <p> tags.
  2. Also set the background color and text color for the <body> tag.
5. Follow the directions in the document Styles in FrontPage to attach the style sheet to all of the pages in the website.
  1. Attach this sheet to page1.htm and page2.htm.

Work on Project Ex8

Here is the cinderella-files folder containing the HTML files and images for Ex8.