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.
“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. Use best practices when writing the CSS. For instance, if you have multiple elements that have the same properties applied, combine the selectors.Test all of your changes to verify your CSS is working as expected.
- 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.
- 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.
- Use only color names for the following prompts.
- Write a rule to apply a relative font size (other than default) and new text color only for the heading 1 element.
- 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.
- Write a rule to apply an another text color and increase the spacing between lines for all paragraph elements.
- Write a rule to apply italics and another text color just for the quote.
- Write a rule to apply a relative font size (smaller than default) and another text color only to the text in the page footer.
- Write a rule to apply an appropriate Web safe 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).
- 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:
- For help with color selection, check CSS3 Color Names and remember to use only color names —i.e., red not #FF0000.
- Web Safe Font Stacks
- Use Google Web Fonts to find appropriate web fonts
- Validate your CSS with the CSS Validator