One Ugly Page

This project begins with this page's ready-made HTML. Your challenge is to write embedded CSS code to solve the problems set out in questions 1-10 below.

Let's make this fun. Your challenge is not only to write correct CSS, but to make this one of the world's ugliest pages. So go nuts. Make the colors clash. Make the fonts ugly. Make the decorative properties obnoxious. I know you can do it!

“I hear and I forget. I see and I remember. I do and I understand.”

CSS Tasks

The numbered items below are the tasks you need to complete. These exercises will test your knowledge of common CSS selectors and text-related properties. If you get stuck, refer back to chapters 11 & 12 in your book.

  1. Write a rule that will globally apply an appropriate sans-serif font stack default for every element on the page, and globally set the default base font size and spacing between lines for all elements.
  2. Override the previous font setting just for the headings—write a rule that will make all heading levels 1 and 2 use an appropriate serif font stack of your choice.
  3. Using only color names, select a color scheme for this page; use as many as you want and make them clash as much as possible — remember the name of this project is One Ugly Page!
  4. Write a rule to apply a relative font size (other than default) and new text color only for the heading 1 element.
  5. Write a rule to apply a relative font size (other than default) and another text color for all heading 2 elements. Just be sure that headings are larger than paragraphs, and heading 2 elements are smaller than heading 1.
  6. Write a rule to apply an yet another text color and increase the spacing between lines for all paragraph elements.
  7. Write a rule to apply italics and another text color just for the quotation text.
  8. Write a rule to apply a relative font size (smaller than default) and another text color only to the text in the page footer.
  9. Write a rule to apply an appropriate Web font (display category) for only the heading 1 element, center align it, and apply decorative properties of your choice (letter-spacing, text-shadow, text-transform but not text-decoration).
  10. Write a rule to indent the first line of each paragraph that directly follows a level 2 heading.

Project Resources

Use your textbook chapters to complete the above tasks.These resources may also be helpful as you learn to implement CSS:

back to Home Page