HTML 1 - Assignment 7

This week you will learn to use CSS to control the display of text. Here is a list of the week's assignments:

• use CSS to modify text in a web page - 8 pts.
• contribute to message board - 2 pts.
• quiz 4 - 10 pts.

Tip of the week: Be VERY careful if you use fonts with multi-word names in your CSS -- like
"Comic Sans MS" or "Arial Black". You must put these font names in quotes for them to display in all browsers.

Preparation:

1. Online lecture: HTML 1, Week 7 - CSS Text and Font Properties
   
   
2. Text: Chapter 9.
   
   
3. Handouts: CSS Font and Text Properties, Week 8 Preparation
   
   
4. Week 6 Review - PowerPoint presentation covered in online lecture (.pdf format)
   Week 6 Review - PowerPoint presentation covered in online lecture (.txt format - accessible)
   
   

For Credit (20 points total):

1. Use CSS font and text properties in a practice page - 8 pts. total
   
   Create an external stylesheet to enhance the practice page found at http://www.santarosa.edu/~cmassell/htmla/assn7code.html. The page will open in a new window.
   
   From the View menu, choose "Page Source" (Firefox), "Source" (Internet Explorer), or "View Source" (Safari). Select and copy all of the code and paste it into your text editor; then save the code as assn7.html so that you can work with it. Do not modify this code except to add a "link" element in the head section of the page to create a link to your stylesheet and to add code to several of the elements to make them belong to the classes you develop in your CSS file.
   
   Create the following rules in your CSS file:
   
   1. Use the font-family property to make it so that two paragraphs on the page have different fonts. Be sure to make your font choices are different enough so that I will be able to see clearly that the two paragraphs have different fonts. - 1 pt.
   2. Use the font-size property to make it so that at least 3 different font sizes (for regular text, not header text) are used on the page. Be sure to follow the recipe given at the bottom of page 354. - 1 pt.
   3. Use the font-weight property to make it so that the quote appears bold and the h1 element appears normal (not bold). - 1 pt.
   4. Use the font-style property to make it so that list items appear in italics. - 1 pt.
   5. Add a text-decoration of your choice to the paragraph indicated in the practice page. - 1 pt.
   6. Use the color property to make it so that at least three different colors of text appear on the page. Use only hex codes, not the predefined color names. This is the most widely used technique among web designers. The text suggests ways to find web colors on pp. 372 - 373. A couple of online color charts that I like are http://www.webmonkey.com/2010/02/color_charts/ and http://visibone.com/colorlab/. - 1 pt.
   7. Make sure the page validates. - 2 pts.
      
      
   Upload your web page and CSS file to the server, and send me an email. In the body of your email you should include the following:
   1. the URL of the web page that demonstrates your CSS rules (should end in assn7.html.)
   2. did your page validate?
   3. select the entire contents of your CSS file, copy the selection, and paste it into your email.
   
   The subject should be "HTML 1 7.1"
   
   
2. Participate in the lesson 7 discussion on the Message Board - 2 pts.
   
   
3. Take Quiz 4 - 10 pts.
   
   Quizzes are open books and open notes but you must not talk to anyone or use your computer for anything except to take the quiz itself. There is no time limit. You will only get one attempt.
   
   

Return to Top