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
- Do not change anything in the HTML file. Change ONLY the CSS file.
- In the CSS file, make ONLY changes that affect the text.
- DO NOT change the colors, layout or positioning of anything, including the text.
- DO NOT use more CSS than needed. Omit all unnecessary CSS.
- Follow all the instructions below.
- Upload both files to your Web site and send me the URL of the HTML page, via e-mail, by the deadline.
Instructions
- There is one heading in the document. Use CSS to specify the font, size and weight of the heading.
- 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).
- 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.
- The intro text (white background) should be larger than the rest.
- The footer text (white background) should be smaller than the rest.
- 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.