Exercise 2

FOCUS Text in CSS

PURPOSE Show your mastery of styling and controlling text with CSS.

VALUE 2 points (see Grading): 1 point for originality and the overall appearance, 1 point for technical proficiency.

DETAILS You will find one HTML file and one CSS file in this folder. Download both files. Make changes in the CSS file to restyle the text according to the requirements and instructions below.

Requirements

Instructions

  1. There is one heading in the document. Use CSS to specify the font, size and weight of the heading.
  2. There is black text appearing on a white background in the document. Use CSS to specify the font, size and any spacing you would like for that text. All text on the white background must be the same font (the heading, however, may be a different font).
  3. NOTE that I will pay particular attention to the "font-family" declarations in your CSS. Be scrupulous about what you include in those declarations in each and every case.
  4. The intro text (white background) should be larger than the rest.
  5. The footer text (white background) should be smaller than the rest.
  6. There is black text on a beige background in the document. Use the type classification for this text that is the opposite of the one you spec'd for the text on the white background. That is, one of them will be serif, and the other will be sans-serif. Use CSS to specify the font, size and any spacing you would like for that text. All text on the beige background must be the same font AND size. (Note that all the text on a beige background is inside <td> tags.)

All fonts and colors in HTML documents today are specified using CSS. (The old use of <font> tags is considered amateurish and outdated.) Cederholm covers all the CSS text style attributes you will need for this exercise.

If you need a review of "safe fonts" that can be used consistently across browsers and operating systems, read this.

Use of text attributes other than font-family, font-size and font-weight is encouraged, but please remember that legibility is your first priority -- and don't load on the styles in any way that makes the page look weird or ugly.