Assignment 8 — Working with Fonts and Colors

This week, you'll learn how to use different font families, weights, styles, and sizes to style different text elements on a web page. The assignment also introduces how color systems work within HTML.

CSS provides several different font properties that you can use to format the text on your web page. These properties include:

• font-family - indicate the font that you'd like to use (such as serif and sans serif)
• font-size - specify the size of the font either as a relative size (small vs. large), a percentage, or an absolute size in pixels.
• font-weight - specify whether text should be bold, normal, bolder, or lighter
• font-style - specify whether the text should be oblique, italics, or normal

p {font-size: 20px; font-family: Verdona, Geneva, Arial, sans-serif; font-weight:bold; font-style:italics;}

When specifying a font-family, you have to be careful not to assume that any fonts (beyond a few basic fonts) are available on your reader's computer. One way to ensure that font is there is to either upload it to your website or use a font API (such as Google fonts) and reference the font via a URL.

To change the color of your text, you can use the color property. You specify colors by either using a name for the color, the RGB (red-green-blue) color code, or the hexadecimal representation of the color. Adobe provides a free tool that allows you to create or use a color theme and identifies the RGB codes or hex code for you to use: http://color.adobe.com. The follow example illustrates the different ways you can specify color:

h1 {color:blue;}
h2 {color: rgb(0,0,255);}
h3 {color: #CC6600;}

For more information, refer to Chapter 8 of the Head First HTML and CSS book.

CSS elements:

Tasks:

1. Read and complete the exercises from Chapter 8 of the Head First HTML and CSS book.
2. Create a folder named Chapter8.
3. In your Chapter8 folder, create your customized versions of the following files.
   • journal.html
   • journal.css
   • at least three images

   Duplicate the folder structure described in the book.

4. Ensure that all of your links work correctly and display the appropriate file when clicked.
5. Validate each of the HTML pages at https://validator.w3.org/. Fix any errors that occur.
6. Upload the contents of your Chapter8 folder to your website.
7. Zip your Chapter8 folder and name the file yourName_chapter8.zip.
8. Submit the zipped file through Blackboard. In the comments section in Blackboard, enter a URL to the files on your website.

Your assignment should demonstrate:

• Revising the html file you created for Assignment 3.
• Creating an external style sheet.
• Inserting a link from the html file to the style sheet.
• Incorporating a new font family within the style sheet.
• Defining CSS rules to change the font-family, font-size, font-weight, and font-style of elements.
• Defining CSS rules to change the color of elements.
• Defining a CSS rule to add a dotted border to an element.
• Validating your files.
• Uploading the files to your website.

Example assignment:

Chapter 8 example