Fonts and Colors

Tools

The CIE 1976 color chart .

To choose web colors (use 6 or 3 character HEX codes, preceded by a #, to specify colors other than: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow):

• color picker,
• color mixer, and
• sample colors.

To validate your CSS files: http://jigsaw.w3.org/css-validator.

Lab 10/2/12

Styling Tony's Journal

1. Here is the code for chapter 8 from the text's web site.
2. Download and save this file in the My Documents directory of the computer at your desk.
3. Double-click on the HFHTML_ch09.zip and extract it in place.
4. Copy the resulting HFHTML_ch09 directory to the LABS directory on your thumbdrive.
5. Rename that directory to Chapter8
6. Edit the journal.html file in the journal directory and create a journal.css file as directed by the text.
   1. Specify the default font-family to be Verdana, Geneva, Arial, sans-serif.
   2. Specify the h1 font-family to be Emblema One. (Hint: use the @font-face pseudo-rule.)
   3. Specify default, h1, and h2 font-sizes.
   4. Change the h2 font-weight to normal.
   5. Change the blockquote font-style to italic.
   6. Change the h1 and h2 color to orange (#CC6600).
7. Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
8. Edit the index.html file in your LABS directory to have a link to your revised journal.html page.

Continue to style your About Me site

1. Edit the project.css file in your PROJECT directory.
2. In the rule for the body element, set the default background-color, text size, and text font.
3. Define sizes for h1, h2, and h3 elements.
4. Make sure that the CSS is valid.
5. Make sure that all of your HTML pages attach this CSS file.

Synchronize your website to your thumbdrive

Check with Bowen that the work you have done is visiable on your web site, today, before leaving class.

Always turn off your computer and screen before leaving the room.